Skip to main content

Code Block のタイトルに拡張子を表示する

なやみ​

  • Markdown の Code Block で ```ts title="..." をつければ Code Block の上にタイトルがつけることができる
  • ```ts のように言語名をつけただけだと、タイトルに出ない
  • これを出せるようにしたい

前提＋方針​

  • Docusaurus では Markdown 解析/レンダリングに remark, rehype を使っている
  • やりたいことは remark のプラグインで、変換を かませることで実現する

具体的な設定箇所​

src/plugins/remark-code-title-default.ts
import { Plugin } from 'unified'
import { visit } from 'unist-util-visit'

const plugin: Plugin = () => {
  return (tree) => {
    visit(tree, 'code', (node: any) => {
      if (!node.meta?.includes('title=') && node.lang) {
        node.meta = `title="${node.lang}" ${node.meta || ''}`.trim()
      }
    })
  }
}

export default plugin
docusaurus.config.ts
import remarkCodeTitleDefault from './src/plugins/remark-code-title-default';

const config: Config = {
  ...
  presets: [
    [
      'classic',
      {
        docs: {
          routeBasePath: '/',
          sidebarPath: './sidebars.ts',
          showLastUpdateTime: true,
          remarkPlugins: [remarkCodeTitleDefault], // ← ★ ここに足した
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },

表示サンプル​

拡張子なし版​

このブロックは拡張子なしで ``` ... ``` で書いています
タイトル部分が出ていたら、それは間違い！

拡張子あり版​

txt
このブロックは拡張子ありで ```txt ... ``` と書いています。
タイトル部分に `txt` と出てれば成功！

タイトルまで指定された版​

sample.txt
このブロックはファイル名ありで ```txt title="sample.txt" ... ``` と書いています。
タイトル部分が 拡張子(`txt`)で上書きされていたら間違い、ファイル名 (`sample.ts`) のままならOK。
Last updated on