Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion components/Template.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {useState} from "react";
import ReactMarkdown from "react-markdown";
import TextareaAutosize from "react-textarea-autosize";
import SyntaxHighlighter from "./SyntaxHighlighter";
import remarkGfm from "remark-gfm";

const INITIAL_TEMPLATE = `# Foobar

Expand Down Expand Up @@ -72,7 +73,10 @@ export function Template() {
id="rendered"
className="markdown-body bg-white p-4 rounded-lg"
>
<ReactMarkdown components={{code: SyntaxHighlighter}}>
<ReactMarkdown
components={{code: SyntaxHighlighter}}
remarkPlugins={[remarkGfm]}
>
{template}
</ReactMarkdown>
</div>
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
"react-github-corner": "2.5.0",
"react-markdown": "9.0.1",
"react-syntax-highlighter": "15.5.0",
"react-textarea-autosize": "8.5.3"
"react-textarea-autosize": "8.5.3",
"remark-gfm": "4.0.1"
},
"devDependencies": {
"@types/node": "20.11.20",
Expand Down
222 changes: 222 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -835,6 +835,13 @@ __metadata:
languageName: node
linkType: hard

"escape-string-regexp@npm:^5.0.0":
version: 5.0.0
resolution: "escape-string-regexp@npm:5.0.0"
checksum: 20daabe197f3cb198ec28546deebcf24b3dbb1a5a269184381b3116d12f0532e06007f4bc8da25669d6a7f8efb68db0758df4cd981f57bc5b57f521a3e12c59e
languageName: node
linkType: hard

"estree-util-is-identifier-name@npm:^3.0.0":
version: 3.0.0
resolution: "estree-util-is-identifier-name@npm:3.0.0"
Expand Down Expand Up @@ -1420,6 +1427,7 @@ __metadata:
react-markdown: "npm:9.0.1"
react-syntax-highlighter: "npm:15.5.0"
react-textarea-autosize: "npm:8.5.3"
remark-gfm: "npm:4.0.1"
tailwindcss: "npm:3.4.1"
typescript: "npm:5.3.3"
languageName: unknown
Expand All @@ -1444,6 +1452,25 @@ __metadata:
languageName: node
linkType: hard

"markdown-table@npm:^3.0.0":
version: 3.0.4
resolution: "markdown-table@npm:3.0.4"
checksum: bc699819e6a15607e5def0f21aa862aa061cf1f49877baa93b0185574f6ab143591afe0e18b94d9b15ea80c6a693894150dbccfacf4f6767160dc32ae393dfe0
languageName: node
linkType: hard

"mdast-util-find-and-replace@npm:^3.0.0":
version: 3.0.2
resolution: "mdast-util-find-and-replace@npm:3.0.2"
dependencies:
"@types/mdast": "npm:^4.0.0"
escape-string-regexp: "npm:^5.0.0"
unist-util-is: "npm:^6.0.0"
unist-util-visit-parents: "npm:^6.0.0"
checksum: 446561aa950341ef6828069cef05566256cb6836b77ea498e648102411f96fdfa342c78b82c9d813b51a1dac80b030ce80c055e044bc285a3d52d8558fc3d65e
languageName: node
linkType: hard

"mdast-util-from-markdown@npm:^2.0.0":
version: 2.0.0
resolution: "mdast-util-from-markdown@npm:2.0.0"
Expand All @@ -1464,6 +1491,83 @@ __metadata:
languageName: node
linkType: hard

"mdast-util-gfm-autolink-literal@npm:^2.0.0":
version: 2.0.1
resolution: "mdast-util-gfm-autolink-literal@npm:2.0.1"
dependencies:
"@types/mdast": "npm:^4.0.0"
ccount: "npm:^2.0.0"
devlop: "npm:^1.0.0"
mdast-util-find-and-replace: "npm:^3.0.0"
micromark-util-character: "npm:^2.0.0"
checksum: d933b42feb126bd094d4be4a4955326c4a9e727a5d0dbe3c824534a19d831996fcf16f67df3dd29550a7d2ac4ac568c80485bee380151ebb42c62848ab20dfa6
languageName: node
linkType: hard

"mdast-util-gfm-footnote@npm:^2.0.0":
version: 2.1.0
resolution: "mdast-util-gfm-footnote@npm:2.1.0"
dependencies:
"@types/mdast": "npm:^4.0.0"
devlop: "npm:^1.1.0"
mdast-util-from-markdown: "npm:^2.0.0"
mdast-util-to-markdown: "npm:^2.0.0"
micromark-util-normalize-identifier: "npm:^2.0.0"
checksum: 5fac0f64d1233f7c533c2bb99a95c56f8f5dab553ae3a83f87c1fd6e4f28e0050e3240ae32ba77b4f5df0b84404932c66fd00c852a0925059bfa5d876f155854
languageName: node
linkType: hard

"mdast-util-gfm-strikethrough@npm:^2.0.0":
version: 2.0.0
resolution: "mdast-util-gfm-strikethrough@npm:2.0.0"
dependencies:
"@types/mdast": "npm:^4.0.0"
mdast-util-from-markdown: "npm:^2.0.0"
mdast-util-to-markdown: "npm:^2.0.0"
checksum: b1abc137d78270540585ad94a7a4ed1630683312690b902389dae0ede50a6832e26d1be053687f49728e14fa8a379da9384342725d3beb4480fc30b12866ab37
languageName: node
linkType: hard

"mdast-util-gfm-table@npm:^2.0.0":
version: 2.0.0
resolution: "mdast-util-gfm-table@npm:2.0.0"
dependencies:
"@types/mdast": "npm:^4.0.0"
devlop: "npm:^1.0.0"
markdown-table: "npm:^3.0.0"
mdast-util-from-markdown: "npm:^2.0.0"
mdast-util-to-markdown: "npm:^2.0.0"
checksum: a043d60d723a86f79c49cbdd1d98b80c89f4a8f9f5fa84b3880c53e132f40150972460aba9be1f44a612ef5abd6810d122c5e7e5d9c54f3ac7560cce8c305c75
languageName: node
linkType: hard

"mdast-util-gfm-task-list-item@npm:^2.0.0":
version: 2.0.0
resolution: "mdast-util-gfm-task-list-item@npm:2.0.0"
dependencies:
"@types/mdast": "npm:^4.0.0"
devlop: "npm:^1.0.0"
mdast-util-from-markdown: "npm:^2.0.0"
mdast-util-to-markdown: "npm:^2.0.0"
checksum: 679a3ff09b52015c0088cd0616ccecc7cc9d250d56a8762aafdffc640f3f607bbd9fe047d3e7e7078e6a996e83f677be3bfcad7ac7260563825fa80a04f8e09d
languageName: node
linkType: hard

"mdast-util-gfm@npm:^3.0.0":
version: 3.1.0
resolution: "mdast-util-gfm@npm:3.1.0"
dependencies:
mdast-util-from-markdown: "npm:^2.0.0"
mdast-util-gfm-autolink-literal: "npm:^2.0.0"
mdast-util-gfm-footnote: "npm:^2.0.0"
mdast-util-gfm-strikethrough: "npm:^2.0.0"
mdast-util-gfm-table: "npm:^2.0.0"
mdast-util-gfm-task-list-item: "npm:^2.0.0"
mdast-util-to-markdown: "npm:^2.0.0"
checksum: d66809a07000ee63661ae9044f550989d96101e3c11557a84e12038ed28490667244432dbb1f8b7d9ebb4936cc8770d3de118aff85b7474f33693b4c07a1ffda
languageName: node
linkType: hard

"mdast-util-mdx-expression@npm:^2.0.0":
version: 2.0.0
resolution: "mdast-util-mdx-expression@npm:2.0.0"
Expand Down Expand Up @@ -1596,6 +1700,99 @@ __metadata:
languageName: node
linkType: hard

"micromark-extension-gfm-autolink-literal@npm:^2.0.0":
version: 2.1.0
resolution: "micromark-extension-gfm-autolink-literal@npm:2.1.0"
dependencies:
micromark-util-character: "npm:^2.0.0"
micromark-util-sanitize-uri: "npm:^2.0.0"
micromark-util-symbol: "npm:^2.0.0"
micromark-util-types: "npm:^2.0.0"
checksum: 933b9b96ca62cd50732d9e58ae90ba446f4314e0ecbff3127e9aae430d9a295346f88fb33b5532acaf648d659b0db92e0c00c2e9f504c0d7b8bb4553318cac50
languageName: node
linkType: hard

"micromark-extension-gfm-footnote@npm:^2.0.0":
version: 2.1.0
resolution: "micromark-extension-gfm-footnote@npm:2.1.0"
dependencies:
devlop: "npm:^1.0.0"
micromark-core-commonmark: "npm:^2.0.0"
micromark-factory-space: "npm:^2.0.0"
micromark-util-character: "npm:^2.0.0"
micromark-util-normalize-identifier: "npm:^2.0.0"
micromark-util-sanitize-uri: "npm:^2.0.0"
micromark-util-symbol: "npm:^2.0.0"
micromark-util-types: "npm:^2.0.0"
checksum: 7e019414e31ab53c49c909b7068adbbcb1726433fce82bf735219276fe6e00a42b66288acb5c8831f80e77480fac34880eeeb60b1dc09d5885862b31db4b9ea2
languageName: node
linkType: hard

"micromark-extension-gfm-strikethrough@npm:^2.0.0":
version: 2.1.0
resolution: "micromark-extension-gfm-strikethrough@npm:2.1.0"
dependencies:
devlop: "npm:^1.0.0"
micromark-util-chunked: "npm:^2.0.0"
micromark-util-classify-character: "npm:^2.0.0"
micromark-util-resolve-all: "npm:^2.0.0"
micromark-util-symbol: "npm:^2.0.0"
micromark-util-types: "npm:^2.0.0"
checksum: eaf2c7b1e3eb2a7d7f405e8abe561be083cc52b8e027225ed286490939f527d18c120df59c8d8e17fdcf284f8d014502bf3db45d8e36e3109457ece8fb1db29b
languageName: node
linkType: hard

"micromark-extension-gfm-table@npm:^2.0.0":
version: 2.1.1
resolution: "micromark-extension-gfm-table@npm:2.1.1"
dependencies:
devlop: "npm:^1.0.0"
micromark-factory-space: "npm:^2.0.0"
micromark-util-character: "npm:^2.0.0"
micromark-util-symbol: "npm:^2.0.0"
micromark-util-types: "npm:^2.0.0"
checksum: 0391ead408d79a183a9bba325b0e660b85aef2cd6e442a9214afc4e0bdc3105cd7dbf41fc75465acf152883a4050b6203107c2a80bcadb304235581a1340fd8c
languageName: node
linkType: hard

"micromark-extension-gfm-tagfilter@npm:^2.0.0":
version: 2.0.0
resolution: "micromark-extension-gfm-tagfilter@npm:2.0.0"
dependencies:
micromark-util-types: "npm:^2.0.0"
checksum: c5e3f8cdf22e184de3f55968e6b010876a100dff31f509b7d2975f2b981a7fdda6c2d9e452238b9fe54dc51f5d7b069e86de509d421d4efbdfc9194749b3f132
languageName: node
linkType: hard

"micromark-extension-gfm-task-list-item@npm:^2.0.0":
version: 2.1.0
resolution: "micromark-extension-gfm-task-list-item@npm:2.1.0"
dependencies:
devlop: "npm:^1.0.0"
micromark-factory-space: "npm:^2.0.0"
micromark-util-character: "npm:^2.0.0"
micromark-util-symbol: "npm:^2.0.0"
micromark-util-types: "npm:^2.0.0"
checksum: c5f72929f0dca77df01442b721356624de6657364e2264ef50fc7226305976f302a49b670836f9494ce70a9b0335d974b5ef8e6457553c4c200bfc06d6951964
languageName: node
linkType: hard

"micromark-extension-gfm@npm:^3.0.0":
version: 3.0.0
resolution: "micromark-extension-gfm@npm:3.0.0"
dependencies:
micromark-extension-gfm-autolink-literal: "npm:^2.0.0"
micromark-extension-gfm-footnote: "npm:^2.0.0"
micromark-extension-gfm-strikethrough: "npm:^2.0.0"
micromark-extension-gfm-table: "npm:^2.0.0"
micromark-extension-gfm-tagfilter: "npm:^2.0.0"
micromark-extension-gfm-task-list-item: "npm:^2.0.0"
micromark-util-combine-extensions: "npm:^2.0.0"
micromark-util-types: "npm:^2.0.0"
checksum: 8493d1041756bf21f9421fa6d357056bff6112aeccebc20595604686cdd908a6816765de297206457ae4c00f85fc58672bdbcbbc36820c25d561b1737af89055
languageName: node
linkType: hard

"micromark-factory-destination@npm:^2.0.0":
version: 2.0.0
resolution: "micromark-factory-destination@npm:2.0.0"
Expand Down Expand Up @@ -2454,6 +2651,20 @@ __metadata:
languageName: node
linkType: hard

"remark-gfm@npm:4.0.1":
version: 4.0.1
resolution: "remark-gfm@npm:4.0.1"
dependencies:
"@types/mdast": "npm:^4.0.0"
mdast-util-gfm: "npm:^3.0.0"
micromark-extension-gfm: "npm:^3.0.0"
remark-parse: "npm:^11.0.0"
remark-stringify: "npm:^11.0.0"
unified: "npm:^11.0.0"
checksum: 86899862cf4ae1466664d3f88c6113e30b5e84e35480aef4093890aed2297ab9872506ff1f614c63963bba7d075c326d0027a1591c11bb493f6776dad21b95f6
languageName: node
linkType: hard

"remark-parse@npm:^11.0.0":
version: 11.0.0
resolution: "remark-parse@npm:11.0.0"
Expand All @@ -2479,6 +2690,17 @@ __metadata:
languageName: node
linkType: hard

"remark-stringify@npm:^11.0.0":
version: 11.0.0
resolution: "remark-stringify@npm:11.0.0"
dependencies:
"@types/mdast": "npm:^4.0.0"
mdast-util-to-markdown: "npm:^2.0.0"
unified: "npm:^11.0.0"
checksum: 32b2f6093ba08e713183629b37e633e0999b6981560eec41f04fe957f76fc6f56dcc14c87c6b45419863be844c6f1130eb2dc055085fc0adc0775b1df7340348
languageName: node
linkType: hard

"resolve@npm:^1.1.7, resolve@npm:^1.22.2":
version: 1.22.8
resolution: "resolve@npm:1.22.8"
Expand Down