patricktree.me
forked from
danabra.mov/overreacted
my blog https://overreacted.io
feat(markdown): add support for tables using remark-gfm (#852)
authored by
Sergio Tales
and committed by
GitHub
2cb59ef1
ab4b1991
+18
-2
+13
app/[slug]/markdown.css
+13
app/[slug]/markdown.css
···
112
112
color: #222;
113
113
}
114
114
115
+
.markdown table {
116
+
width: 100%;
117
+
border-collapse: collapse;
118
+
margin-bottom: 1.5rem;
119
+
}
120
+
121
+
.markdown th,
122
+
.markdown td {
123
+
border: 1px solid #dcdcdc;
124
+
padding: 8px;
125
+
text-align: left;
126
+
}
127
+
115
128
@media (prefers-color-scheme: dark) {
116
129
.markdown input {
117
130
color: #111;
+4
-2
app/[slug]/page.js
+4
-2
app/[slug]/page.js
···
11
11
import { remarkMdxEvalCodeBlock } from "./mdx.js";
12
12
import overnight from "overnight/themes/Overnight-Slumber.json";
13
13
import "./markdown.css";
14
+
import remarkGfm from "remark-gfm";
14
15
15
16
overnight.colors["editor.background"] = "var(--code-bg)";
16
17
···
29
30
let Wrapper = postComponents.Wrapper ?? Fragment;
30
31
const { content, data } = matter(file);
31
32
const discussUrl = `https://bsky.app/search?q=${encodeURIComponent(
32
-
`https://overreacted.io/${slug}/`,
33
+
`https://overreacted.io/${slug}/`
33
34
)}`;
34
35
const editUrl = `https://github.com/gaearon/overreacted.io/edit/main/public/${encodeURIComponent(
35
-
slug,
36
+
slug
36
37
)}/index.md`;
37
38
return (
38
39
<>
···
80
81
useDynamicImport: true,
81
82
remarkPlugins: [
82
83
remarkSmartpants,
84
+
remarkGfm,
83
85
[remarkMdxEvalCodeBlock, filename],
84
86
],
85
87
rehypePlugins: [