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

编辑/更新： 虽然Highlight.js的解决方案可用于stackblitz，但它给实际的代码库带来了问题。其次，突出显示Java代码非常基础。

我一直在探索，然后继续创建自己的自定义聚合物元素。它目前仅支持Java代码突出显示，并且here可用。

Answer 1

您是否添加了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 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中的所有内容进行美化。

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

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

Google代码修饰代码突出显示不适用于Polymer 3

3 个答案: