Google 代码美化代码突出显示不适用于 Polymer 3

Question

如何在 Polymer 3 中使用 Google 代码美化？

语法高亮不起作用。 示例代码如下：

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

这个库以旧方式工作，不能很好地与 ShadowDom 配合使用。相反，您应该使用像 Highlight.js 这样的库，它可以作为模块使用。在聚合物 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 2

prettify 的 style.css 加了吗？ https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css

我也会尝试将语言类放在 pre class 属性中。 （也使用 lang 代替语言）

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

Answer 3

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

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

它不会递归到影子 DOM 中，也不会美化在 onload 之后添加的内容。

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