Google code-prettify 代码突出显示不适用于 Polymer 3

Question

如何在 Polymer 3 中使用 Google code-prettify？

语法突出显示不起作用。示例代码如下：

class MyView1 extends PolymerElement {
    static get template() {
        return html` 
      <style include="shared-styles">

 </style>

       <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

                <pre class="prettyprint">
                    <code class="language-java">
                        public static void getValue(){

                            String name = "Vikram";
                        }




                    </code>
                </pre>

我在 https://stackblitz.com/edit/polymer-element-example-d7n14q 和运行添加了一个可以编辑代码的工作示例。

Answer 1

你有没有添加美化的style.css？ https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css

此外，我会尝试将语言 class 放在前 class 属性中。（也使用 lang 而不是 language）

如果它给它着色但没有像你期望的那样，你可以尝试将 lang 作为 get 参数发送： https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=java

Answer 2

此库以旧方式工作，不能很好地与 ShadowDom 配合使用。相反，您应该使用像 Highlight.js 这样的库，它可以作为模块使用。在 polymer 3 中，首先使用您的特定语言导入库

import hljs from 'highlight.js/lib/highlight';
import java from 'highlight.js/lib/languages/java';
hljs.registerLanguage('java', java);

然后使用

突出显示您的元素

hljs.highlightBlock(this.$.code);

这里是一个工作示例：https://stackblitz.com/edit/polymer-element-example-tthbbn

Answer 3

看起来你有一个使用突出显示的解决方案，但要解释发生了什么：

run_prettify.js 在加载时美化 DOM 中的所有内容。

它不会递归到影子 DOMs 中，也不会美化加载后添加的内容。

您可以通过显式调用 prettyPrintOne post 渲染来解决这两个问题，也许通过 Polymer.RenderStatus.afterNextRender 渲染，尽管我不知道它如何与 lithtml 交互。

Google code-prettify 代码突出显示不适用于 Polymer 3

Google code-prettify Code highlighting not working for Polymer 3

javascript

polymer-3.x

google-code-prettify