أنا أستخدم 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 + '">Open in Script Debugger</a>' ).insertAfter($(this).parent());
});
},
{ id: 'applescript-decorator' }
);
}
</script>
عند مراجعة سجل وحدة التحكم (console log)، أرى أنني أجد كتل <code> في منشوراتي، لكن سمة class تُبلغ بأنها undefined.
هل توجد طريقة لجعل كود decorateCooked الخاص بي يعمل بعد أن يقوم HighlightJS بعمله؟
وجدت حلاً بديلاً لهذه المشكلة باستخدام 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 + '">Open in 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 + '">Open in 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>