polymer - 如何为 <marked-element> 添加语法高亮?

标签 polymer syntax-highlighting polymer-1.0 web-component custom-element

我一直在尝试向 <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> 

荧光笔将检测 <marked-element> 中的元素并为其设置样式。 .

关于polymer - 如何为 <marked-element> 添加语法高亮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36230859/

相关文章:

javascript - 互联网浏览器 : issue with dynamically setting polymer paper-tooltip innerHTML

css - Polymer的paper-dropdown-menu选中项字体颜色

javascript - 在 Rails 应用程序中将 Web 应用程序单独作为 'V' ?

javascript - 聚合物 dom-repeat 子属性将子项更改为主机接线

javascript - 无法使用 stopPropagation() 停止点击传播

rest - polymer REST 后端

javascript - 如何在只读 Polymer 1.x 属性中设置子属性

c - asm 语法高亮和 asm 文件在 Visual Studio 中显示

javascript - 重叠不同颜色的 TEXTAREA 以获得语法高亮...流畅的复制/粘贴——可能吗?

bash - 令人困惑的标记语法