paveg
commented
1 year ago ちなみにzenn関連のツールが商用利用不可に当たるため、アフィリエイトも厳しい よって、この辺は早めに対応しておきたい所。
Closed paveg closed 1 year ago
paveg
commented
1 year ago ちなみにzenn関連のツールが商用利用不可に当たるため、アフィリエイトも厳しい よって、この辺は早めに対応しておきたい所。
paveg
commented
1 year ago rehype-highlightdiff --git a/package.json b/package.json
index 245f833..8d68b17 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-share": "^4.4.1",
+ "rehype-highlight": "^6.0.0",
"remark-gfm": "^3.0.1",
"zenn-content-css": "^0.1.134",
"zenn-embed-elements": "^0.1.134",
diff --git a/src/lib/mdx2html.ts b/src/lib/mdx2html.ts
index 0908597..fb4060b 100644
--- a/src/lib/mdx2html.ts
+++ b/src/lib/mdx2html.ts
@@ -1,5 +1,6 @@
import { MDXRemoteSerializeResult } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
+import rehypeHighlight from 'rehype-highlight';
import remarkGfm from 'remark-gfm';
export const mdx2html = async (mdSource: string): Promise<MDXRemoteSerializeResult> => {
@@ -7,7 +8,7 @@ export const mdx2html = async (mdSource: string): Promise<MDXRemoteSerializeResu
parseFrontmatter: true,
mdxOptions: {
remarkPlugins: [remarkGfm],
- rehypePlugins: []
+ rehypePlugins: [rehypeHighlight]
}
});
};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 415d67c..c85d40c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -37,6 +37,11 @@ export default function App(props: AppProps) {
return (
<>
+ <link
+ href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css'
+ rel='stylesheet'
+ />
+ <Script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js' />
<GoogleTagManager googleTagManagerId={gtm.GOOGLE_TAG_MANAGER_ID as GoogleTagManagerId} />
<Script
data-pin-hover='true'
diff --git a/yarn.lock b/yarn.lock
index a51ea97..7f4147c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1908,6 +1908,7 @@ __metadata:
react: 18.2.0
react-dom: 18.2.0
react-share: ^4.4.1
+ rehype-highlight: ^6.0.0
remark-gfm: ^3.0.1
tailwindcss: ^3.2.4
typescript: "*"
@@ -3792,6 +3793,15 @@ __metadata:
languageName: node
linkType: hard
+"fault@npm:^2.0.0":
+ version: 2.0.1
+ resolution: "fault@npm:2.0.1"
+ dependencies:
+ format: ^0.2.0
+ checksum: c9b30f47d95769177130a9409976a899ed31eb598450fbad5b0d39f2f5f56d5f4a9ff9257e0bee8407cb0fc3ce37165657888c6aa6d78472e403893104329b72
+ languageName: node
+ linkType: hard
+
"feed@npm:^4.2.2":
version: 4.2.2
resolution: "feed@npm:4.2.2"
@@ -3950,6 +3960,13 @@ __metadata:
languageName: node
linkType: hard
+"format@npm:^0.2.0":
+ version: 0.2.2
+ resolution: "format@npm:0.2.2"
+ checksum: 646a60e1336250d802509cf24fb801e43bd4a70a07510c816fa133aa42cdbc9c21e66e9cc0801bb183c5b031c9d68be62e7fbb6877756e52357850f92aa28799
+ languageName: node
+ linkType: hard
+
"formdata-polyfill@npm:^4.0.10":
version: 4.0.10
resolution: "formdata-polyfill@npm:4.0.10"
@@ -4480,6 +4497,16 @@ __metadata:
languageName: node
linkType: hard
+"hast-util-is-element@npm:^2.0.0":
+ version: 2.1.3
+ resolution: "hast-util-is-element@npm:2.1.3"
+ dependencies:
+ "@types/hast": ^2.0.0
+ "@types/unist": ^2.0.0
+ checksum: 9d988f6839a50566a895a3dd19222e6ab1591243f6a3c36bba835b7e9339a2845f1ff1c583425afd602de1a57a76c5bae8a6dc0ab1d6e5d1e252b422cdeadbb7
+ languageName: node
+ linkType: hard
+
"hast-util-to-estree@npm:^2.0.0":
version: 2.2.0
resolution: "hast-util-to-estree@npm:2.2.0"
@@ -4503,6 +4530,18 @@ __metadata:
languageName: node
linkType: hard
+"hast-util-to-text@npm:^3.0.0":
+ version: 3.1.2
+ resolution: "hast-util-to-text@npm:3.1.2"
+ dependencies:
+ "@types/hast": ^2.0.0
+ "@types/unist": ^2.0.0
+ hast-util-is-element: ^2.0.0
+ unist-util-find-after: ^4.0.0
+ checksum: d17cf3344c1d584ddd811cbb78d25b6c9819e62c8edb9643b53be38083fd978a6fa9a5bf6e6cd7b5ea48d30d9edc2859acae40b8bb89e166bebcda6017d4703d
+ languageName: node
+ linkType: hard
+
"hast-util-whitespace@npm:^2.0.0":
version: 2.0.1
resolution: "hast-util-whitespace@npm:2.0.1"
@@ -4510,6 +4549,13 @@ __metadata:
languageName: node
linkType: hard
+"highlight.js@npm:~11.7.0":
+ version: 11.7.0
+ resolution: "highlight.js@npm:11.7.0"
+ checksum: 19e3fb8b56f4b361b057a8523b989dfeb6479bbd1e29cec3fac6fa5c78d09927d5fa61b7dba6631fdb57cfdca9b3084aa4da49405ceaf4a67f67beae2ed5b77d
+ languageName: node
+ linkType: hard
+
"hoist-non-react-statics@npm:^3.3.1":
version: 3.3.2
resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -5663,6 +5709,17 @@ __metadata:
languageName: node
linkType: hard
+"lowlight@npm:^2.0.0":
+ version: 2.8.0
+ resolution: "lowlight@npm:2.8.0"
+ dependencies:
+ "@types/hast": ^2.0.0
+ fault: ^2.0.0
+ highlight.js: ~11.7.0
+ checksum: c45a91e71562aa254e1c57c3d1bb85318afe9eec589755987abcc9712a1f929bb9ab2338b45829371451083e2eda5c0f4b7081492cb851ce97a090341929e362
+ languageName: node
+ linkType: hard
+
"lru-cache@npm:^5.1.1":
version: 5.1.1
resolution: "lru-cache@npm:5.1.1"
@@ -8230,6 +8287,19 @@ __metadata:
languageName: node
linkType: hard
+"rehype-highlight@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "rehype-highlight@npm:6.0.0"
+ dependencies:
+ "@types/hast": ^2.0.0
+ hast-util-to-text: ^3.0.0
+ lowlight: ^2.0.0
+ unified: ^10.0.0
+ unist-util-visit: ^4.0.0
+ checksum: 5a70e7ad459384f2d6401fbf52a6309a555b79d29742f0c2d1989d4c2a07f52d77663edc79b287cda8b40737a5dd0594a7dc5fae236dc22f1b9147f8ee4abb4d
+ languageName: node
+ linkType: hard
+
"remark-gfm@npm:^3.0.1":
version: 3.0.1
resolution: "remark-gfm@npm:3.0.1"
@@ -9540,6 +9610,16 @@ __metadata:
languageName: node
linkType: hard
+"unist-util-find-after@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "unist-util-find-after@npm:4.0.0"
+ dependencies:
+ "@types/unist": ^2.0.0
+ unist-util-is: ^5.0.0
+ checksum: 8381ef0bad18a0b1fa1c7ee47f94a2578ab6bf572eb126a1f179526b9dca47584fc070976f2d83bbe381161fa33b9164a894d0279a30ec83e65433356d43df57
+ languageName: node
+ linkType: hard
+
"unist-util-generated@npm:^2.0.0":
version: 2.0.0
resolution: "unist-util-generated@npm:2.0.0"実装読む zenn-embed-elements
paveg
commented
1 year ago paveg
commented
1 year ago
mdx（markdown + jsx）にするの良さそうと思いつつも少し手を動かしたらparse処理で涙飲んだので一旦考えるだけにしておく