Add markdown styles

This commit is contained in:
Defectink
2022-04-06 16:02:27 +08:00
parent 5cec1c504f
commit 112309940c
6 changed files with 91 additions and 46 deletions

View File

@ -1,4 +1,3 @@
import cn from 'classnames';
import NextImage from 'next/image'; import NextImage from 'next/image';
import { DetailedHTMLProps, ImgHTMLAttributes } from 'react'; import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';

View File

@ -11,7 +11,7 @@ const PostTOC: FC<Props> = ({ headings }) => {
<> <>
<h2>What&apos;s inside?</h2> <h2>What&apos;s inside?</h2>
<ul className="pl-4 border-l-4 border-gray-300"> <ul className="pl-4 border-l-4 border-gray-300 toc">
{headings?.map((h) => ( {headings?.map((h) => (
<li key={h.link}> <li key={h.link}>
<Anchor href={h.link} external={false}> <Anchor href={h.link} external={false}>

View File

@ -1,14 +1,14 @@
--- ---
title: Second post test title: Markdown test
date: '2022-03-25' date: '2022-04-06'
tags: ['functions', 'JavaScript'] tags: ['functions', 'JavaScript']
--- ---
import Layout from 'layouts/MDXLayout.tsx'; import Layout from 'layouts/MDXLayout.tsx';
export const meta = { export const meta = {
title: 'Second post test', title: 'Markdown test',
date: '2022-03-25', date: '2022-04-06',
tags: ['functions', 'JavaScript'], tags: ['functions', 'JavaScript'],
}; };
@ -65,6 +65,12 @@ This is my second post.
## Horizontal Rules ## Horizontal Rules
heihei
---
haha
## Typographic replacements ## Typographic replacements
Enable typographer option to see result. Enable typographer option to see result.
@ -129,10 +135,12 @@ Inline `code`
Indented code Indented code
// Some comments ```
line 1 of code // Some comments
line 2 of code line 1 of code
line 3 of code line 2 of code
line 3 of code
```
Block code "fences" Block code "fences"
@ -143,7 +151,7 @@ Sample text here...
Syntax highlighting Syntax highlighting
```js ```js
var foo = function (bar) { const foo = function (bar) {
return bar++; return bar++;
}; };
@ -176,20 +184,8 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
## Images ## Images
With a reference later in the document defining the URL location:
With a reference later in the document defining the URL location:
With a reference later in the document defining the URL location:
![Minion](/images/p/second-post/minion.png) ![Minion](/images/p/second-post/minion.png)
With a reference later in the document defining the URL location:
With a reference later in the document defining the URL location:
With a reference later in the document defining the URL location:
## Other ## Other
> test > Blockquote test.

View File

@ -28,8 +28,8 @@
* --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
*/ */
.dark code[class*='language-'], .dark code,
.dark pre[class*='language-'] { .dark pre {
background: hsl(220, 13%, 18%); background: hsl(220, 13%, 18%);
color: hsl(220, 14%, 71%); color: hsl(220, 14%, 71%);
text-shadow: 0 1px rgba(0, 0, 0, 0.3); text-shadow: 0 1px rgba(0, 0, 0, 0.3);
@ -51,24 +51,24 @@
} }
/* Selection */ /* Selection */
.dark code[class*='language-']::-moz-selection, .dark code::-moz-selection,
.dark code[class*='language-'] *::-moz-selection, .dark code *::-moz-selection,
.dark pre[class*='language-'] *::-moz-selection { .dark pre *::-moz-selection {
background: hsl(220, 13%, 28%); background: hsl(220, 13%, 28%);
color: inherit; color: inherit;
text-shadow: none; text-shadow: none;
} }
.dark code[class*='language-']::selection, .dark code::selection,
.dark code[class*='language-'] *::selection, .dark code *::selection,
.dark pre[class*='language-'] *::selection { .dark pre *::selection {
background: hsl(220, 13%, 28%); background: hsl(220, 13%, 28%);
color: inherit; color: inherit;
text-shadow: none; text-shadow: none;
} }
/* Code blocks */ /* Code blocks */
.dark pre[class*='language-'] { .dark pre {
padding: 1em; padding: 1em;
margin: 0.5em 0; margin: 0.5em 0;
overflow: auto; overflow: auto;
@ -76,7 +76,7 @@
} }
/* Inline code */ /* Inline code */
.dark :not(pre) > code[class*='language-'] { .dark :not(pre) > code {
padding: 0.2em 0.3em; padding: 0.2em 0.3em;
border-radius: 0.3em; border-radius: 0.3em;
white-space: normal; white-space: normal;
@ -84,8 +84,8 @@
/* Print */ /* Print */
@media print { @media print {
.dark code[class*='language-'], .dark code,
.dark pre[class*='language-'] { .dark pre {
text-shadow: none; text-shadow: none;
} }
} }

View File

@ -28,8 +28,8 @@
* --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
*/ */
code[class*='language-'], code,
pre[class*='language-'] { pre {
background: hsl(230, 1%, 98%); background: hsl(230, 1%, 98%);
color: hsl(230, 8%, 24%); color: hsl(230, 8%, 24%);
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
@ -50,22 +50,22 @@ pre[class*='language-'] {
} }
/* Selection */ /* Selection */
code[class*='language-']::-moz-selection, code::-moz-selection,
code[class*='language-'] *::-moz-selection, code *::-moz-selection,
pre[class*='language-'] *::-moz-selection { pre *::-moz-selection {
background: hsl(230, 1%, 90%); background: hsl(230, 1%, 90%);
color: inherit; color: inherit;
} }
code[class*='language-']::selection, code::selection,
code[class*='language-'] *::selection, code *::selection,
pre[class*='language-'] *::selection { pre *::selection {
background: hsl(230, 1%, 90%); background: hsl(230, 1%, 90%);
color: inherit; color: inherit;
} }
/* Code blocks */ /* Code blocks */
pre[class*='language-'] { pre {
padding: 1em; padding: 1em;
margin: 0.5em 0; margin: 0.5em 0;
overflow: auto; overflow: auto;
@ -73,7 +73,7 @@ pre[class*='language-'] {
} }
/* Inline code */ /* Inline code */
:not(pre) > code[class*='language-'] { :not(pre) > code {
padding: 0.2em 0.3em; padding: 0.2em 0.3em;
border-radius: 0.3em; border-radius: 0.3em;
white-space: normal; white-space: normal;

View File

@ -91,6 +91,13 @@
@apply text-lg leading-10; @apply text-lg leading-10;
} }
#article .toc {
padding-left: 0.8em;
}
#article .toc li {
list-style-type: none;
}
#article h1 { #article h1 {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -272,3 +279,46 @@ h6:hover::before {
#article sup { #article sup {
top: -0.5em; top: -0.5em;
} }
#article ol li {
list-style-type: auto;
}
#article ul li {
list-style-type: initial;
}
#article ul.no-list,
#article ol.no-list {
padding: 0;
list-style-type: none;
}
#article ol[type='1'] {
list-style-type: decimal;
}
#article ol[type='a'] {
list-style-type: lower-alpha;
}
#article ol[type='i'] {
list-style-type: lower-roman;
}
#article div > ol:not([type]) {
list-style-type: decimal;
}
#article ul,
#article ol {
margin-top: 0;
margin-bottom: 0;
padding-left: 2em;
}
#article ol ol,
#article ul ol {
list-style-type: lower-roman;
}
#article ul ul ol,
#article ul ol ol,
#article ol ul ol,
#article ol ol ol {
list-style-type: lower-alpha;
}
#article dd {
margin-left: 0;
}