Add table of contents style

This commit is contained in:
Defectink
2022-03-28 11:43:21 +08:00
parent 3612df3c60
commit fac934eee2
3 changed files with 31 additions and 31 deletions

View File

@ -10,7 +10,11 @@ const composedConfig = composePlugins([
mdx({ mdx({
extension: /\.mdx?$/, extension: /\.mdx?$/,
options: { options: {
remarkPlugins: [remarkFrontmatter, remarkToc, remarkGfm], remarkPlugins: [
remarkFrontmatter,
() => remarkToc({ maxDepth: 2 }),
remarkGfm,
],
rehypePlugins: [rehypePrism, rehypeSlug], rehypePlugins: [rehypePrism, rehypeSlug],
providerImportSource: '@mdx-js/react', providerImportSource: '@mdx-js/react',
}, },

View File

@ -14,7 +14,7 @@ export const meta = {
export default ({ children }) => <Layout {...meta}>{children}</Layout>; export default ({ children }) => <Layout {...meta}>{children}</Layout>;
## Table Of Content ## Table of contents
## Hello ## Hello

View File

@ -2,6 +2,15 @@
@apply text-lg leading-10; @apply text-lg leading-10;
} }
/* For the table of content */
#article h2#table-of-contents + ul {
@apply border-l-4 border-gray-300;
@apply pl-4;
}
#article h2#table-of-contents:hover::before {
content: unset;
}
#article h1 { #article h1 {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -16,61 +25,48 @@
@apply mt-8 mb-20; @apply mt-8 mb-20;
} }
#article h2 { #article h2,
h3,
h4,
h5,
h6 {
font-weight: bold; font-weight: bold;
@apply relative text-3xl;
@apply text-gray-700 dark:text-gray-200;
@apply mt-8 mb-2;
} }
#article h2:hover::before { #article h2:hover::before,
h3:hover::before,
h4:hover::before,
h5:hover::before,
h6:hover::before {
content: '#'; content: '#';
left: -1.6rem; left: -1.6rem;
@apply absolute text-gray-400; @apply absolute text-gray-400;
} }
#article h2 {
@apply relative text-3xl;
@apply text-gray-700 dark:text-gray-200;
@apply mt-8 mb-2;
}
#article h3 { #article h3 {
font-weight: bold;
@apply relative text-2xl; @apply relative text-2xl;
@apply mt-6 mb-2; @apply mt-6 mb-2;
} }
#article h3:hover::before {
content: '#';
left: -1.5rem;
@apply absolute text-gray-400;
}
#article h4 { #article h4 {
font-weight: bold;
@apply relative text-xl; @apply relative text-xl;
@apply mt-6 mb-2; @apply mt-6 mb-2;
} }
#article h4:hover::before {
content: '#';
left: -1.5rem;
@apply absolute text-gray-400;
}
#article h5 { #article h5 {
font-weight: bold;
@apply relative; @apply relative;
@apply mt-4 mb-2; @apply mt-4 mb-2;
} }
#article h5:hover::before {
content: '#';
left: -1.5rem;
@apply absolute text-gray-400;
}
#article h6 { #article h6 {
font-weight: bold;
@apply relative; @apply relative;
@apply mt-2 mb-2; @apply mt-2 mb-2;
} }
#article h6:hover::before {
content: '#';
left: -1.5rem;
@apply absolute text-gray-400;
}
#article table { #article table {
border-spacing: 0; border-spacing: 0;