1

如何在 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添加了一个工作示例，其中也可以编辑和运行代码。

4

3 回答 3

0

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

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

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

于 2018-10-08T15:23:03.157 回答
0

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

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

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

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

于 2018-10-15T15:26:11.927 回答
0

这个库以旧方式工作，不能很好地与 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

于 2018-10-13T12:18:55.740 回答