Docusaurusの注意書きや警告文のタイトルを見出しにして、目次にも乗せる方法

2024年1月27日 · 約17分

東京都小平市議会議員

Docusaurus🦖

@@ -113,6 +113,6 @@

Layoutファイルを次のように変更するのみです。

src/theme/Admonition/Layout/index.js
import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import styles from './styles.module.css';
import headingStyles from '@docusaurus/theme-classic/lib/theme/Heading/styles.module.css';

function AdmonitionContainer({type, className, children}) {
  return (
    <div
      className={clsx(
        ThemeClassNames.common.admonition,
        ThemeClassNames.common.admonitionType(type),
        styles.admonition,
        className,
      )}>
      {children}
    </div>
  );
}
function AdmonitionHeading({icon, title, id}) {
  let depth = 0;
  let trimmedTitle = title;
  // titleにHTML等が含まれている場合は文字列ではなく配列になる
  if(typeof title === "string") {
    // 文字列冒頭の#の数を数える（
    depth = title.match ? (title.toString().match(/^#+/) || [''])[0].length : 0;
    // #を省いたタイトルを得る
    trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title;
  } else if (typeof title[0] === "string") {
    depth = title[0].match ? (title[0].match(/^#+/) || [''])[0].length : 0;
    trimmedTitle = depth > 0 ? [title[0].replace(/^#+/, '').trim(), ...title.slice(1)] : title;
  }

  // スクロール位置調整のcss
  const classNames = clsx("anchor", "title", headingStyles.anchorWithStickyNavbar);
  // depthに応じて見出しタグをレンダー
  return (
    <div className={styles.admonitionHeading}>
      <span className={styles.admonitionIcon}>{icon}</span>
      {(() => {
        if (depth == 3) {
          return(
            <h3
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h3>
          )
        } else if (depth == 4) {
          return(
            <h4
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h4>
          )
        } else if (depth == 5) {
          return(
            <h5
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h5>
          )
        } else if (depth == 6) {
          return(
            <h6
              id={id}
              className={classNames}
            >
              {trimmedTitle}
            </h6>
          )
        } else {
          return(
            <>
              {trimmedTitle}
            </>
          )
        }
      })()}
    </div>
  );
}
function AdmonitionContent({children}) {
  return children ? (
    <div className={styles.admonitionContent}>{children}</div>
  ) : null;
}
export default function AdmonitionLayout(props) {
  const {type, icon, title, children, className, id} = props;
  return (
    <AdmonitionContainer type={type} className={className}>
      <AdmonitionHeading title={title} icon={icon} id={id} />
      <AdmonitionContent>{children}</AdmonitionContent>
    </AdmonitionContainer>
  );
}

上記を設定後、npm start等の再起動が必要です。

以上です。

新ふらっとブログ立ち上げました

Docusaurusの注意書きや警告文のタイトルを見出しにして、目次にも乗せる方法

Docusaurus🦖

合気公園の整備進捗状況

小平市立合気公園・開園セレモニー

Docusaurus🦖​

Docusaurus🦖