decorateCooked в теме против HighlightJS

Поддержка
1

Я использую decorateCooked в теме моего сайта для постобработки блоков кода HighlightJS для конкретного языка. Это работает, когда для обозначения кода в посте используется ``` , но не работает, когда код включается с помощью отступов.

В успешном случае классы HighlightJS присутствуют до вызова моего кода decorateCooked, и я могу использовать JQuery для поиска блоков кода с моим языковым классом (‘applescript’). В неудачном случае, похоже, HighlightJS применяет свои магии после выполнения моего кода плагина, так как классы HighlightJS (hljs applescript) отсутствуют. Однако эти классы присутствуют, когда я позже проверяю загруженную страницу.

Вот мой код, который определен в части </HEAD> моей темы:

<script type="text/discourse-plugin" version="0.1">
    if (navigator.appVersion.indexOf('Mac') >= 0) { // Выполнять только на Mac
        api.decorateCooked(
            $elem => {
                console.log($elem.find('code'));
                console.log($elem.find('code').attr('class'));
                $elem.find('.lang-applescript, .applescript').filter(function () {
		            return $(this).parents('.d-editor-preview').length < 1; // Не выполнять в предпросмотре редактора
            	}).each(function(index) {
   		            var src = encodeURIComponent(this.innerText);

        		    $( '<a class="widget-button btn btn-default" href="sdapplescript://com.apple.scripteditor?action=new&script=' + src + '">Открыть в Script Debugger</a>' ).insertAfter($(this).parent());
        	    });
            },
            { id: 'applescript-decorator' }
        );
    }
</script>

Согласно логу консоли, я нахожу блоки <code> в своих постах, но атрибут class возвращается как undefined.

Есть ли способ заставить мой код decorateCooked выполняться после того, как HighlightJS завершит свою работу?

2

Я нашел обходной путь для этой проблемы с использованием MutationObserver, но не уверен, что это лучший подход:

<script type="text/discourse-plugin" version="0.1">
    if (navigator.appVersion.indexOf('Mac') >= 0) { // Делать это только на Mac
        if (typeof myObserver == 'undefined') {
            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
            var myObserver = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    var target = $(mutation.target);
                    
                    if (target.hasClass('applescript')) {
                        var src = encodeURIComponent(mutation.target.innerText);

                        $('<a class="widget-button btn btn-default" href="sdapplescript://com.apple.scripteditor?action=new&script=' + src + '">Открыть в Script Debugger</a>').insertAfter(target.parent());
                    }
                });
            });
            var obsConfig = { childList: false, characterData: false, attributes: true, subtree: false };
        }

        api.decorateCooked(
            $elem => {
                $elem.find('.lang-applescript, .applescript').filter(function () {
                    return $(this).parents('.d-editor-preview').length < 1; // Не делать это в предпросмотре редактора
                }).each(function(index) {
                    var src = encodeURIComponent(this.innerText);

                    $('<a class="widget-button btn btn-default" href="sdapplescript://com.apple.scripteditor?action=new&script=' + src + '">Открыть в Script Debugger</a>').insertAfter($(this).parent());
                });
                
                // Обработать случай, когда HighlightJS применяется *после* вызова decorateCooked. Это происходит для
                // блоков кода, введенных через отступы, а не через ```.
                $elem.find('code:not(.applescript,.lang-applescript)').filter(function () {
                    return $(this).parents('.d-editor-preview').length < 1; // Не делать это в предпросмотре редактора
                }).each(function () {
                    myObserver.observe(this, obsConfig);
                });
            },
            { id: 'applescript-decorator', onlyStream: true }
        );
    }
</script>
3

У меня возникла точно такая же проблема, поэтому я добавил новую функцию API для решения этого случая: api.registerHighlightJSPlugin.

Вы можете передавать ей плагины, основанные на функциях HighlightJS. Документация доступна по адресу Plugin API — highlight.js 11.9.0 documentation