Google Code-prettify Подсветка кода не работает для Polymer 3 - PullRequest
Новая
       30

Google Code-prettify Подсветка кода не работает для Polymer 3

0 голосов
/ 06 октября 2018

Как использовать Google prettify code в Polymer 3?

Подсветка синтаксиса не работает.Пример кода ниже: 

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";
                        }

Я добавил рабочий образец на https://stackblitz.com/edit/polymer-element-example-d7n14q, где код также можно редактировать и запускать.

РЕДАКТИРОВАНИЕ / ОБНОВЛЕНИЕ: Хотя решение с Highlight.js работало над stackblitz, оно вызывало проблему с реальной базой кода.Во-вторых, выделение для Java-кода было очень простым.

Я продолжал исследовать, а затем пошел по пути создания своего собственного Полимерного Элемента.На данный момент он поддерживает только подсветку кода Java и доступен здесь .

Ответы [ 3 ]

0 голосов
/ 13 октября 2018

Эта библиотека работает по-старому и плохо работает с 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

0 голосов
/ 15 октября 2018

Похоже, у вас есть решение, использующее выделение, но для объяснения того, что происходит:

run_prettify.js предварительно загружает все в DOM во время загрузки.

Это не повторяетсяв теневые DOM и не выполняет предварительное тестирование содержимого, добавляемого после загрузки.

Вы можете решить обе проблемы, явно вызвав prettyPrintOne post render, возможно, через Polymer.RenderStatus.afterNextRender, хотя я не знаю, как это взаимодействует с lithtml..

0 голосов
/ 08 октября 2018

Вы добавили style.css prettify?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

...