1. ヘルプ
  2. 実装(全般)
  3. ユースケース別の実装方法

リッチエディタのコードブロックで入力したコードをサイト上でハイライトさせる方法は?

リッチエディタのコードブロックで入力したソースコードをサイト上でハイライト(シンタックスハイライト)させるには、microCMSのAPIで取得したリッチエディタのコンテンツ(HTML)をパースし、ハイライト用のライブラリなどを使用してハイライトを付与する必要があります。

コンテンツ(HTML)のパースとハイライトを付与する具体的な方法については、以下のブログ記事をご参照ください。

 

なお、新リッチエディタにおいては、コードブロックに対してファイル名と言語を指定できますので、必要に応じてそちらも設定してください。

詳しくは公式ドキュメント「リッチエディタの操作方法」をご確認ください。

2023年5月31日に、新しいリッチエディタをリリースしております。今後はこちらのリッチエディタが推奨となりますので、適宜移行をご検討ください。