Highlight.JSのテーマコンポーネント経由で新しい言語をインストールする

[Discourse]

HighlightJS コードにフックを追加したため、プラグイン 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```

この API を使用する公式テーマコンポーネント:

- 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>