polymer - 如何为 <marked-element> 添加语法高亮？-6ren

polymer - 如何为添加语法高亮？

转载作者：行者123 更新时间：2023-12-05 00:19:17

我一直在尝试向 <marked-element> 添加语法突出显示使用 <prism-highlighter> ，但我完全不知道如何让它发挥作用。

在阅读的文档时，它指出“ 支持此流程”，但不清楚如何一起使用它们。

查看 <prism-highlighter> source on the GitHub 时，给出的唯一演示是单独使用它时，以这种方式使用它会错过的所有好处。

我可以使用 .markdown 访问内容，但我不知道如何处理它并将其发回，并且每次尝试都失败了。

我如何使用进行 Markdown ，并添加语法高亮？

或者也许改变 iron-demo-helpers' <demo-snippet>这样我就可以通过复制按钮获得漂亮的布局，但适用于不同的语言，如 bash 和 python 脚本。 (根据 supported languages on the PrismJS website 两者均受支持。)

编辑:事实证明，这不是我做错的方式，而是默认情况下不支持我使用的语言。发布的解决方案作为下面的答案。

最佳答案

插入 <marked-element>在 <prism-highlighter> 后面加上你的代码标签，如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="import" href="/bower_components/marked-element/marked-element.html">
    <link rel="import" href="/bower_components/prism-element/prism-highlighter.html">
</head>
<body>
    <prism-highlighter></prism-highlighter>
    <marked-element>
        <script type="text/markdown">
            ```html
            <div>yes</div>
            <i>
                console.log( "no log" )
            </i>
            ```
        </script>
    </marked-element>
</body>
</html>