コードをハイライトする

この組み込みJSを使用するとこで、ブログ記事やコンテンツ内のソースコードに対して、highlight.js を使って自動的にハイライト表示されるように設定されています。

使用例

以下のように pre > code で囲まれた範囲にスタイルがつきます。

<pre>
  <code>
  ...
  </code>
</pre>

設定

初期設定が js/config.js で設定されています。

highlightMark: 'pre',
highlightConfig: {
  theme: 'atom-one-light', // テーマを指定（https://highlightjs.org/examples を参照）
  languages: ['bash', 'css', 'javascript', 'json', 'php', 'sql', 'typescript', 'xml', 'yaml', 'twig'], // ハイライトする言語を指定（https://highlightjs.org/download を参照）
},

設定を変更する場合

設定を変更する際は、js/config.js を直接編集しないでください。
将来的なアップデートやテーマの互換性維持のため、設定の上書きはテーマ内の HTML テンプレートなどで行ってください。

例：テンプレート内での上書き方法

<script>
ACMS.Ready(() => {
  ACMS.Config.highlightConfig.theme = 'atom-one-dark';
  ACMS.Config.highlightConfig.languages = [...ACMS.Config.highlightConfig.languages, 'python', 'typescript']; // pythonとtypescriptを追加
});
</script>