astro-paperに標準で入っている目次関係のプラグインを設定した。 目次の実現方法はいろいろあるが、とりあえず標準機能でできることをやってみた。
目次
初期設定
初期状態は以下。
astro.config.mjs
markdown: {
remarkPlugins: [
remarkLinkCard,
remarkToc,
[
remarkCollapse,
{
test: "Table of contents",
},
],
],
shikiConfig: {
theme: "one-dark-pro",
wrap: true,
},
extendDefaultPlugins: true,
},目次 remark-toc
キーワードにマッチした最初のヘッディングに目次が生成される。
デフォルトキーワードは以下。case-insensitive
heading (string, default: '(table[ -]of[ -])?contents?|toc')
— heading to look for, wrapped in new RegExp('^(' + value + ')$', 'i')折りたたみ remark-collapse
ヘッディングが”Table of contents”の場合、その章が折りたたまれる。
変更後の設定
設定内容は
- ヘッディングが Contents|目次|記事の目次 のとき目次を作成
- Contents|記事の目次 のとき折りたたみ
- 目次領域が記事と区別がつくように見た目を変更
目次、折りたたみ
astro.config.mjs
markdown: {
remarkPlugins: [
remarkLinkCard,
[
remarkToc,
{
heading: 'contents|(記事の)?目次',
},
],
[
remarkCollapse,
{
test: 'contents|記事の目次',
},
],
],
shikiConfig: {
theme: 'one-dark-pro',
wrap: true,
},
extendDefaultPlugins: true,
},見た目
styles/base.css
...
@layer base {
:root,
html[data-theme="light"] {
...
--color-border: 236, 233, 233;
--color-border2: #ece9e9;
...
}
html[data-theme="dark"] {
...
--color-border: 171, 75, 8;
--color-border2: #ab4b08;
...
}
...
h3#記事の目次,
h3#contents {
margin-bottom: 0 !important;
font-size: 1.1em;
font-weight: 500;
padding: 6px 0 0 15px;
border-top: 1px solid VAR(--color-border2);
}
h3#記事の目次 + p,
h3#contents + p {
margin: 0;
padding: 0;
}
h3#記事の目次 ~ details,
h3#contents ~ details {
width: 100%;
margin: 0;
padding: 0 0 6px 18px;
border-bottom: 1px solid VAR(--color-border2);
font-size: 0.95em;
line-height: 1.8em;
}
h3#記事の目次 ~ details ul,
h3#contents ~ details ul {
margin: -20px 0 0 0;
padding: 0 0 0 22px;
}
h3#記事の目次 ~ details ul li ul,
h3#contents ~ details ul li ul,
h3#記事の目次 ~ details ul li,
h3#contents ~ details ul li {
margin: 0;
}
h3#記事の目次 ~ details ul li a,
h3#contents ~ details ul li a {
text-decoration: none;
}
h3#目次 {
margin-bottom: 0 !important;
font-size: 1.1em;
font-weight: 500;
padding: 6px 0 0 15px;
border-top: 1px solid VAR(--color-border2);
}
h3#目次 + ul {
margin: 0;
padding: 0 0 6px 39px;
border-bottom: 1px solid VAR(--color-border2);
font-size: 0.95em;
line-height: 1.8em;
}
h3#目次 + ul li,
h3#目次 + ul li ul {
margin: 0;
}
h3#目次 + ul li a {
text-decoration: none;
}
ul li {
padding-left: 0 !important;
}
...
参考
MarkdownとMDX
AstroでMarkdownやMDXを使ってコンテンツを作成する方法を紹介します。
GitHub - remarkjs/remark-toc: plugin to generate a table of contents (TOC)
plugin to generate a table of contents (TOC). Contribute to remarkjs/remark-toc development by creating an account on GitHub.
GitHub - Rokt33r/remark-collapse: Make a section collapsible!
Make a section collapsible! Contribute to Rokt33r/remark-collapse development by creating an account on GitHub.