gatsby-remark-vscodeにハイライト可能な言語を追加する

投稿日: 2022/03/11 (19:13)

公式 docsに書いてあったのですが、少しわかりにくかったので。
とても簡単に追加できました。

例として .txt と .dart を追加してみます。

対応してる言語

gatsby-remark-vscode は 55 の言語のハイライトに対応してます。(2021/3/11 現在)

一覧(docから引用)

これは対応というかエイリアスを設定します。
gatsby-config.js にて ignore にすれば期待通りになる。

{
  resolve: `gatsby-remark-vscode`,
    options: {
      languageAliases: { txt: 'ignore' },
    },
},

まず、VSCode にて Dart 言語のプラグインを表示させます。

vscode-dart-extension

リソースのところにリポジトリとあるのでリクックしてブラウザで開きます。(上画像赤丸)

リポジトリのリンクは https://github.com/Dart-Code/Dart-Code なので npm で次のようにインストールします。

$ npm i Dart-Code/Dart-Code

package.json の name プロパティを確認して、

dart-code

gatsby-config.js に以下のように extensions プロパティに書きます。

{
  resolve: `gatsby-remark-vscode`,
    options: {
      extensions: ['dart-code'],
    },
},

これで対応終了です。

.txt も vscode プラグインで何かあるなら、エイリアスを貼るのではなく .dart の時と同じような手順で対応するのも良いと思う。