لقد أضفت للتو خطافًا (hook) إلى كود HighlightJS الخاص بنا، لذا يمكنك الآن استخدام واجهة برمجة تطبيقات المكون الإضافي (plugin API) لإضافة لغة مخصصة لـ Highlight.JS.
مثال (باستخدام تعريف لغة beancount):
const beancountLang = function(e){var c="[A-Z][A-Za-z0-9-]*",a="[0-9]{4}[-|/][0-9]{2}[-|/][0-9]{2}",b="(balance|commodity|custom|document|event|note|open|pad|price|query)",t={cN:"literal",b:/([\\-|\\+]?)([\\d]+[\\.]?[\\d]*)/,r:0},n={cN:"string",b:'\"',e:'\"',r:0,c:[e.BE]},s={cN:"name",b:"\\\\{\",e:\"\\\\}\",c:[{cN:"literal",b:a},t,n,{cN:"subst",b:"[A-Z][A-Z0-9'._-]{0,22}[A-Z0-9]\"}]};return{aliases:[\"beancount\",\"bean\",\"ledger\"],c:[{cN:"built_in",b:"^(include|option|plugin|popmeta|poptag|pushmeta|pushtag)",r:0},{b:"^\"+a+\"\\\\s+\"+b,rB:!0,r:10,c:[{cN:"type",b:a,e:/\\s+/,eE:!0},{cN:"keyword",b:b}]},{b:"^\"+a+\"\\\\s+.\\\\s\",rB:!0,r:10,c:[{cN:"type",b:a,e:"\\\\s+\",eE:!0},{cN:"variable",b:".\",endsParent:!0}]},e.C(\";\",\"$\"),{cN:"meta",b:/^\\s{2,}[a-z][A-Za-z0-9\\-_]+:/},s,{cN:"name",b:"@"},{cN:"type",b:c+\":\",r:0,c:[{cN:"subst",b:c+\"(:\"+c+\")?\"}]},{cN:"section",b:/^\\*\\s+?.*/},{cN:"link",b:/\\^[A-Za-z0-9\\-_\\/.]+/},{cN:["emphasis"],b:/#[A-Za-z0-9\\-_\\/.]+/},n,t]}}\napi.registerHighlightJSLanguage(\"beancount\", beancountLang);\n```
مكونات الثيمات الرسمية التي تستخدم واجهة برمجة التطبيقات هذه:
- https://github.com/discourse/discourse-highlightjs-glimmer
- https://github.com/discourse/discourse-highlightjs-structured-text
---
<small>يتم التحكم في إصدار هذه الوثيقة - اقترح التغييرات [على github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/24-highlight-js-language.md).</small>