mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
Add markdown styles
This commit is contained in:
@ -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';
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ const PostTOC: FC<Props> = ({ headings }) => {
|
|||||||
<>
|
<>
|
||||||
<h2>What's inside?</h2>
|
<h2>What'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}>
|
||||||
|
@ -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:
|
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
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.
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user