prism-react-rendererでRubyのシンタックスハイライトを有効にする方法

このブログではシンタックスハイライトを実現するために以前の記事でも紹介したようにprism-react-rendererを使っていますが、どうやらRubyのシンタックスハイライトが効いていないみたいだったので対応しました。

解決方法はREADMEのFAQにありました。

手順

①Prismの本体が必要になるのでインストール

yarn add prismjs
# or
npm install prisimjs

②prism-react-rendererのPrismをwindow.Prismに代入してRubyのコンポーネントを読み込む

import React from 'react'
import Highlight, { defaultProps, Prism } from 'prism-react-renderer'
import './code.sass'

// TypeScriptを使っている場合は型が怒られるのでdeclareが必要
declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace NodeJS {
    interface Global {
      Prism: any
    }
  }
}
declare global {
  interface Window {
    Prism: any
  }
}

;(typeof global !== 'undefined' ? global : window).Prism = Prism
require('prismjs/components/prism-ruby')

Ruby以外の言語についても同じようにすることで対応することが出来ます。

Prismが対応している言語についてはこちら。めちゃくちゃ多いです。

ちなみにprism-react-rendererが最初から対応している言語は執筆時点でこんな感じ

• Bash
• C
• C++
• C-like
• CSS
• CoffeeScript
• Diff
• Git
• Go
• GraphQL
• Handlebars
• JSON
• JavaScript
• Less
• Makefile
• Markdown
• Markup
• OCaml
• Objective-C
• Python
• React
• Reason
• SCSS
• SQL
• Sass
• Stylus
• TypeScript
• WebAssembly
• YAML

最新の対応言語はこちら

フロントエンドの言語が多めにサポートされてる感じですかね。