Prism.js で言語設定する際の依存関係のメモ

Prism.js は文中にあるプログラム言語のキーワードをコードハイライトしてくれるライブラリです。 Markdown 記法のパーサーであるmarked.js などに組み込まれていたりします。

実際にコードハイライトするためには、各プログラミング言語に対応したJavaScript Mudule を設定する必要があります。 そのJavaScript Mudule には依存関係があったりするので、この記事でまとめていきたいと思います。

基本的な使い方

コードハイライトについて

Markdown 記法でコードハイライトするためには、まず下記のように言語名を書く必要があります。 コードハイライトライブラリは、この言語名を解析して、適切なスタイルを適用してくれます。

    ``` javascript
    +function() {
        console.log('Hello World!')
    }()
    ```

上記の記述をMarkdown 中に記述すると、下記のようにハイライトがあたります。

+function() {
    console.log('Hello World!')
}()

JavaScript Mudule 設定について

Prism.js の場合、ハイライトしたいプログラミング言語に合わせてJavaScript Module を設定していく必要があります。

Angular の場合

Angular.json の"architect" > "build" > "options" > "scripts" に依存関係を記述していきます。

設定例（省略している記述があるので注意してください）

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
              "node_modules/prismjs/themes/prism-okaidia.css"
            ],
            "scripts": [
              "node_modules/marked/lib/marked.js",
              "node_modules/prismjs/prism.js",
              "node_modules/prismjs/components/prism-aspnet.min.js",
              "node_modules/prismjs/components/prism-bash.min.js",
              "node_modules/prismjs/components/prism-c.min.js",
              "node_modules/prismjs/components/prism-clike.min.js",
              "node_modules/prismjs/components/prism-csharp.min.js",
              "node_modules/prismjs/components/prism-css.min.js",
              "node_modules/prismjs/components/prism-dart.min.js",
              "node_modules/prismjs/components/prism-docker.min.js",
              "node_modules/prismjs/components/prism-java.min.js",
              "node_modules/prismjs/components/prism-javascript.min.js",
              "node_modules/prismjs/components/prism-json.min.js",
              "node_modules/prismjs/components/prism-kotlin.min.js",
              "node_modules/prismjs/components/prism-markdown.min.js",
              "node_modules/prismjs/components/prism-markup.min.js",
              "node_modules/prismjs/components/prism-objectivec.min.js",
              "node_modules/prismjs/components/prism-powershell.min.js",
              "node_modules/prismjs/components/prism-scss.min.js",
              "node_modules/prismjs/components/prism-sql.min.js",
              "node_modules/prismjs/components/prism-swift.min.js",
              "node_modules/prismjs/components/prism-typescript.min.js",
              "node_modules/prismjs/components/prism-yaml.min.js",
              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
            ]
          },
        },
      }
    },
  },
}

依存関係一覧

追加で必要なCSS は「依存関係」欄に記載しています。

参考資料

• marked.js (2019/10/06)
• Prism.js (2019/09/01)