J’ai ajouté une hook à notre code HighlightJS, vous pouvez donc maintenant utiliser l’API du plugin pour ajouter un langage personnalisé pour Highlight.JS.
Exemple (en utilisant la définition du langage 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```
Composants de thème officiels qui utilisent cette API :
- https://github.com/discourse/discourse-highlightjs-glimmer
- https://github.com/discourse/discourse-highlightjs-structured-text
---
<small>Ce document est contrôlé par version - suggérez des modifications [sur github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/24-highlight-js-language.md).</small>