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 の時と同じような手順で対応するのも良いと思います。