From b6fc84653d214ca53b09ff26f0795d77e38f5317 Mon Sep 17 00:00:00 2001 From: Arthals Date: Tue, 5 Mar 2024 00:17:59 +0800 Subject: [PATCH 1/4] feat: Add support for unknown languages & style: Update code line formatting --- src/components/modules/shared/CodeBlock.tsx | 19 ++++-------- .../code-highlighter/shiki/Shiki.module.css | 2 +- .../ui/code-highlighter/shiki/Shiki.tsx | 8 ++--- .../ui/code-highlighter/shiki/utils.tsx | 29 ++----------------- 4 files changed, 13 insertions(+), 45 deletions(-) diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx index 4a117a0378..ea3583ca5f 100644 --- a/src/components/modules/shared/CodeBlock.tsx +++ b/src/components/modules/shared/CodeBlock.tsx @@ -4,8 +4,6 @@ import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect' import dynamic from 'next/dynamic' import type { ReactNode } from 'react' -import { HighLighterPrismCdn } from '~/components/ui/code-highlighter' -import { isSupportedShikiLang } from '~/components/ui/code-highlighter/shiki/utils' import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading' import { BlockLoading } from './BlockLoading' @@ -54,17 +52,12 @@ export const CodeBlockRender = (props: { ) } default: { - const lang = props.lang - if (lang && isSupportedShikiLang(lang)) { - const ShikiHighLighter = dynamic(() => - import('~/components/ui/code-highlighter/shiki/Shiki').then( - (mod) => mod.ShikiHighLighter, - ), - ) - return - } - - return + const ShikiHighLighter = dynamic(() => + import('~/components/ui/code-highlighter/shiki/Shiki').then( + (mod) => mod.ShikiHighLighter, + ), + ) + return } } }, [props]) diff --git a/src/components/ui/code-highlighter/shiki/Shiki.module.css b/src/components/ui/code-highlighter/shiki/Shiki.module.css index 34ab30917c..ab8627adce 100644 --- a/src/components/ui/code-highlighter/shiki/Shiki.module.css +++ b/src/components/ui/code-highlighter/shiki/Shiki.module.css @@ -17,7 +17,7 @@ } .line { - @apply block px-4; + @apply block; } .highlighted, diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx index 59fde19429..9077db7afa 100644 --- a/src/components/ui/code-highlighter/shiki/Shiki.tsx +++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx @@ -13,6 +13,7 @@ import type { HighlighterCore } from 'shiki' import { getViewport } from '~/atoms/hooks' import { AutoResizeHeight } from '~/components/modules/shared/AutoResizeHeight' +import { isSupportedShikiLang } from '~/components/ui/code-highlighter/shiki/utils' import { useMaskScrollArea } from '~/hooks/shared/use-mask-scrollarea' import { clsxm } from '~/lib/helper' @@ -64,9 +65,8 @@ export const ShikiHighLighter: FC = (props) => { () => import('shiki/langs/vue.mjs'), () => import('shiki/langs/html.mjs'), () => import('shiki/langs/asm.mjs'), - () => import('shiki/langs/bash.mjs'), + () => import('shiki/langs/shell.mjs'), () => import('shiki/langs/ps.mjs'), - () => import('shiki/langs/ps1.mjs'), ], loadWasm: getWasm, }) @@ -103,7 +103,7 @@ export const ShikiHighLighter: FC = (props) => { return codeHighlighter(highlighter, { attrs: attrs || '', code: value, - lang: language || '', + lang: language && isSupportedShikiLang(language) ? language : '', }) }, [attrs, language, value, highlighter]) @@ -152,7 +152,7 @@ export const ShikiHighLighter: FC = (props) => {
{ } export const isSupportedShikiLang = (lang: string) => { - return [ - 'javascript', - 'typescript', - 'ts', - 'js', - 'css', - 'tsx', - 'jsx', - 'json', - 'sql', - 'markdown', - 'vue', - 'rust', - 'go', - 'cpp', - 'c', - 'html', - 'asm', - 'bash', - 'ps', - 'ps1', - // plain text - 'text', - 'plaintext', - 'txt', - 'plain', - ].includes(lang) + return Object.keys(bundledLanguages).includes(lang) } From 5670e964b5a5a79c0bcf2a801ceb68a836804234 Mon Sep 17 00:00:00 2001 From: Arthals Date: Tue, 5 Mar 2024 00:31:19 +0800 Subject: [PATCH 2/4] fix: lang tag z-index --- src/components/ui/code-highlighter/shiki/Shiki.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx index 9077db7afa..160d1da263 100644 --- a/src/components/ui/code-highlighter/shiki/Shiki.tsx +++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx @@ -132,7 +132,7 @@ export const ShikiHighLighter: FC = (props) => { {!filename && !!language && (
{language.toUpperCase()}
From 965ba53c2205e30346e658696cf5869df6bbcee1 Mon Sep 17 00:00:00 2001 From: Arthals Date: Tue, 5 Mar 2024 00:36:03 +0800 Subject: [PATCH 3/4] fix: case in-sensive --- src/components/ui/code-highlighter/shiki/Shiki.tsx | 5 ++++- src/components/ui/code-highlighter/shiki/utils.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx index 160d1da263..31fd067f9b 100644 --- a/src/components/ui/code-highlighter/shiki/Shiki.tsx +++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx @@ -103,7 +103,10 @@ export const ShikiHighLighter: FC = (props) => { return codeHighlighter(highlighter, { attrs: attrs || '', code: value, - lang: language && isSupportedShikiLang(language) ? language : '', + lang: + language && isSupportedShikiLang(language) + ? language.toLowerCase() + : '', }) }, [attrs, language, value, highlighter]) diff --git a/src/components/ui/code-highlighter/shiki/utils.tsx b/src/components/ui/code-highlighter/shiki/utils.tsx index a89af09e07..0326e07493 100644 --- a/src/components/ui/code-highlighter/shiki/utils.tsx +++ b/src/components/ui/code-highlighter/shiki/utils.tsx @@ -59,5 +59,5 @@ export const parseFilenameFromAttrs = (attrs: string) => { } export const isSupportedShikiLang = (lang: string) => { - return Object.keys(bundledLanguages).includes(lang) + return Object.keys(bundledLanguages).includes(lang.toLowerCase()) } From c10110203d098e5a83f77d505f03e6af56ba4bee Mon Sep 17 00:00:00 2001 From: Arthals Date: Tue, 5 Mar 2024 18:45:09 +0800 Subject: [PATCH 4/4] revert: Multiple highlighters --- src/components/modules/shared/CodeBlock.tsx | 19 ++++++++---- .../ui/code-highlighter/shiki/Shiki.tsx | 6 +--- .../ui/code-highlighter/shiki/utils.tsx | 29 +++++++++++++++++-- 3 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx index ea3583ca5f..4a117a0378 100644 --- a/src/components/modules/shared/CodeBlock.tsx +++ b/src/components/modules/shared/CodeBlock.tsx @@ -4,6 +4,8 @@ import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect' import dynamic from 'next/dynamic' import type { ReactNode } from 'react' +import { HighLighterPrismCdn } from '~/components/ui/code-highlighter' +import { isSupportedShikiLang } from '~/components/ui/code-highlighter/shiki/utils' import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading' import { BlockLoading } from './BlockLoading' @@ -52,12 +54,17 @@ export const CodeBlockRender = (props: { ) } default: { - const ShikiHighLighter = dynamic(() => - import('~/components/ui/code-highlighter/shiki/Shiki').then( - (mod) => mod.ShikiHighLighter, - ), - ) - return + const lang = props.lang + if (lang && isSupportedShikiLang(lang)) { + const ShikiHighLighter = dynamic(() => + import('~/components/ui/code-highlighter/shiki/Shiki').then( + (mod) => mod.ShikiHighLighter, + ), + ) + return + } + + return } } }, [props]) diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx index 31fd067f9b..fecf4e79bc 100644 --- a/src/components/ui/code-highlighter/shiki/Shiki.tsx +++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx @@ -13,7 +13,6 @@ import type { HighlighterCore } from 'shiki' import { getViewport } from '~/atoms/hooks' import { AutoResizeHeight } from '~/components/modules/shared/AutoResizeHeight' -import { isSupportedShikiLang } from '~/components/ui/code-highlighter/shiki/utils' import { useMaskScrollArea } from '~/hooks/shared/use-mask-scrollarea' import { clsxm } from '~/lib/helper' @@ -103,10 +102,7 @@ export const ShikiHighLighter: FC = (props) => { return codeHighlighter(highlighter, { attrs: attrs || '', code: value, - lang: - language && isSupportedShikiLang(language) - ? language.toLowerCase() - : '', + lang: language ? language.toLowerCase() : '', }) }, [attrs, language, value, highlighter]) diff --git a/src/components/ui/code-highlighter/shiki/utils.tsx b/src/components/ui/code-highlighter/shiki/utils.tsx index 0326e07493..905d8bf200 100644 --- a/src/components/ui/code-highlighter/shiki/utils.tsx +++ b/src/components/ui/code-highlighter/shiki/utils.tsx @@ -1,4 +1,3 @@ -import { bundledLanguages } from 'shiki' import type { BundledLanguage, BundledTheme, @@ -59,5 +58,31 @@ export const parseFilenameFromAttrs = (attrs: string) => { } export const isSupportedShikiLang = (lang: string) => { - return Object.keys(bundledLanguages).includes(lang.toLowerCase()) + return [ + 'javascript', + 'typescript', + 'ts', + 'js', + 'css', + 'tsx', + 'jsx', + 'json', + 'sql', + 'markdown', + 'vue', + 'rust', + 'go', + 'cpp', + 'c', + 'html', + 'asm', + 'bash', + 'ps', + 'ps1', + // plain text + 'text', + 'plaintext', + 'txt', + 'plain', + ].includes(lang.toLowerCase()) }