diff --git a/src/renderer/src/assets/images/lang/bash.svg b/src/renderer/src/assets/images/lang/bash.svg new file mode 100644 index 0000000000..8aade9d716 --- /dev/null +++ b/src/renderer/src/assets/images/lang/bash.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/c.svg b/src/renderer/src/assets/images/lang/c.svg new file mode 100644 index 0000000000..c9afdbd14b --- /dev/null +++ b/src/renderer/src/assets/images/lang/c.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/cmake.svg b/src/renderer/src/assets/images/lang/cmake.svg new file mode 100644 index 0000000000..0c1ab97bf6 --- /dev/null +++ b/src/renderer/src/assets/images/lang/cmake.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/cplusplus.svg b/src/renderer/src/assets/images/lang/cplusplus.svg new file mode 100644 index 0000000000..6cae2226d0 --- /dev/null +++ b/src/renderer/src/assets/images/lang/cplusplus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/renderer/src/assets/images/lang/csharp.svg b/src/renderer/src/assets/images/lang/csharp.svg new file mode 100644 index 0000000000..acc487eb51 --- /dev/null +++ b/src/renderer/src/assets/images/lang/csharp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/css3.svg b/src/renderer/src/assets/images/lang/css3.svg new file mode 100644 index 0000000000..ff5b6ce620 --- /dev/null +++ b/src/renderer/src/assets/images/lang/css3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/go.svg b/src/renderer/src/assets/images/lang/go.svg new file mode 100644 index 0000000000..433778040d --- /dev/null +++ b/src/renderer/src/assets/images/lang/go.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/java.svg b/src/renderer/src/assets/images/lang/java.svg new file mode 100644 index 0000000000..051bf254ad --- /dev/null +++ b/src/renderer/src/assets/images/lang/java.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/javascript.svg b/src/renderer/src/assets/images/lang/javascript.svg new file mode 100644 index 0000000000..7975261bd4 --- /dev/null +++ b/src/renderer/src/assets/images/lang/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/json.svg b/src/renderer/src/assets/images/lang/json.svg new file mode 100644 index 0000000000..90bb4d37b0 --- /dev/null +++ b/src/renderer/src/assets/images/lang/json.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/lua.svg b/src/renderer/src/assets/images/lang/lua.svg new file mode 100644 index 0000000000..6b7ea4b08e --- /dev/null +++ b/src/renderer/src/assets/images/lang/lua.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/perl.svg b/src/renderer/src/assets/images/lang/perl.svg new file mode 100644 index 0000000000..49f3673886 --- /dev/null +++ b/src/renderer/src/assets/images/lang/perl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/php.svg b/src/renderer/src/assets/images/lang/php.svg new file mode 100644 index 0000000000..32b7a5b44c --- /dev/null +++ b/src/renderer/src/assets/images/lang/php.svg @@ -0,0 +1,2 @@ + + diff --git a/src/renderer/src/assets/images/lang/python.svg b/src/renderer/src/assets/images/lang/python.svg new file mode 100644 index 0000000000..e0e096a24e --- /dev/null +++ b/src/renderer/src/assets/images/lang/python.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/ruby.svg b/src/renderer/src/assets/images/lang/ruby.svg new file mode 100644 index 0000000000..9c651106b1 --- /dev/null +++ b/src/renderer/src/assets/images/lang/ruby.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/rust.svg b/src/renderer/src/assets/images/lang/rust.svg new file mode 100644 index 0000000000..3f2c9b0ac2 --- /dev/null +++ b/src/renderer/src/assets/images/lang/rust.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/typescript.svg b/src/renderer/src/assets/images/lang/typescript.svg new file mode 100644 index 0000000000..e1db5f1965 --- /dev/null +++ b/src/renderer/src/assets/images/lang/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/assets/images/lang/vb.svg b/src/renderer/src/assets/images/lang/vb.svg new file mode 100644 index 0000000000..f10686a589 --- /dev/null +++ b/src/renderer/src/assets/images/lang/vb.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/xml.svg b/src/renderer/src/assets/images/lang/xml.svg new file mode 100644 index 0000000000..bb16105b43 --- /dev/null +++ b/src/renderer/src/assets/images/lang/xml.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/assets/images/lang/yaml.svg b/src/renderer/src/assets/images/lang/yaml.svg new file mode 100644 index 0000000000..56618856da --- /dev/null +++ b/src/renderer/src/assets/images/lang/yaml.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/renderer/src/components/CodeBlockView/view.tsx b/src/renderer/src/components/CodeBlockView/view.tsx index 8b251b9603..a4f5c726e0 100644 --- a/src/renderer/src/components/CodeBlockView/view.tsx +++ b/src/renderer/src/components/CodeBlockView/view.tsx @@ -17,6 +17,7 @@ import CodeViewer from '@renderer/components/CodeViewer' import ImageViewer from '@renderer/components/ImageViewer' import type { BasicPreviewHandles } from '@renderer/components/Preview' import { MAX_COLLAPSED_CODE_HEIGHT } from '@renderer/config/constant' +import { getLangLogo } from '@renderer/config/lang' import { useSettings } from '@renderer/hooks/useSettings' import { pyodideService } from '@renderer/services/PyodideService' import { getExtensionByLanguage } from '@renderer/utils/code-language' @@ -284,8 +285,19 @@ export const CodeBlockView: React.FC = memo(({ children, language, onSave }, [children, codeImageTools, language]) const renderHeader = useMemo(() => { - const langTag = '<' + language.toUpperCase() + '>' - return {isInSpecialView ? '' : langTag} + const logo = getLangLogo(language) + return ( + + {isInSpecialView ? ( + '' + ) : ( + <> + {logo && {language}} + {language} + + )} + + ) }, [isInSpecialView, language]) // 根据视图模式和语言选择组件，优先展示特殊视图，fallback是源代码视图 @@ -352,7 +364,7 @@ const CodeHeader = styled.div<{ $isInSpecialView?: boolean }>` display: flex; align-items: center; color: var(--color-text); - font-size: 14px; + font-size: 13px; line-height: 1; font-weight: bold; padding: 0 10px; @@ -361,6 +373,12 @@ const CodeHeader = styled.div<{ $isInSpecialView?: boolean }>` margin-top: ${(props) => (props.$isInSpecialView ? '6px' : '0')}; height: ${(props) => (props.$isInSpecialView ? '16px' : '34px')}; background-color: ${(props) => (props.$isInSpecialView ? 'transparent' : 'var(--color-background-mute)')}; + + img { + width: 12px; + height: 12px; + margin-right: 6px; + } ` const SplitViewWrapper = styled.div<{ $isSpecialView: boolean; $isSplitView: boolean }>` diff --git a/src/renderer/src/components/Preview/SvgPreview.tsx b/src/renderer/src/components/Preview/SvgPreview.tsx index 396a651c0d..81dd279bba 100644 --- a/src/renderer/src/components/Preview/SvgPreview.tsx +++ b/src/renderer/src/components/Preview/SvgPreview.tsx @@ -3,20 +3,18 @@ import { memo, useCallback } from 'react' import { useDebouncedRender } from './hooks/useDebouncedRender' import ImagePreviewLayout from './ImagePreviewLayout' import { ShadowTransparentContainer } from './styles' -import type { BasicPreviewHandles } from './types' +import { BasicPreviewHandles, type BasicPreviewProps } from './types' import { renderSvgInShadowHost } from './utils' -interface SvgPreviewProps { - children: string - enableToolbar?: boolean - className?: string - ref?: React.RefObject -} - /** * 使用 Shadow DOM 渲染 SVG */ -const SvgPreview = ({ children, enableToolbar = false, className, ref }: SvgPreviewProps) => { +const SvgPreview = ({ + children, + enableToolbar = false, + className, + ref +}: BasicPreviewProps & { ref?: React.RefObject } & { className?: string }) => { // 定义渲染函数 const renderSvg = useCallback(async (content: string, container: HTMLDivElement) => { renderSvgInShadowHost(content, container) diff --git a/src/renderer/src/config/lang.ts b/src/renderer/src/config/lang.ts new file mode 100644 index 0000000000..dbcfe5fec9 --- /dev/null +++ b/src/renderer/src/config/lang.ts @@ -0,0 +1,88 @@ +/** + * @license + * The MIT License (MIT) + * + * Copyright (c) 2015 konpa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ +import BashIcon from '@renderer/assets/images/lang/bash.svg' +import CIcon from '@renderer/assets/images/lang/c.svg' +import CMakeIcon from '@renderer/assets/images/lang/cmake.svg' +import CppIcon from '@renderer/assets/images/lang/cplusplus.svg' +import CSharpIcon from '@renderer/assets/images/lang/csharp.svg' +import CSS3Icon from '@renderer/assets/images/lang/css3.svg' +import GoIcon from '@renderer/assets/images/lang/go.svg' +import JavaIcon from '@renderer/assets/images/lang/java.svg' +import JavaScriptIcon from '@renderer/assets/images/lang/javascript.svg' +import JsonIcon from '@renderer/assets/images/lang/json.svg' +import LuaIcon from '@renderer/assets/images/lang/lua.svg' +import PerlIcon from '@renderer/assets/images/lang/perl.svg' +import PhpIcon from '@renderer/assets/images/lang/php.svg' +import PythonIcon from '@renderer/assets/images/lang/python.svg' +import RubyIcon from '@renderer/assets/images/lang/ruby.svg' +import RustIcon from '@renderer/assets/images/lang/rust.svg' +import TypeScriptIcon from '@renderer/assets/images/lang/typescript.svg' +import VBIcon from '@renderer/assets/images/lang/vb.svg' +import XMLIcon from '@renderer/assets/images/lang/xml.svg' +import YamlIcon from '@renderer/assets/images/lang/yaml.svg' +export function getLangLogo(lang: string) { + if (!lang) { + return undefined + } + + const logoMap = { + bash: BashIcon, + cpp: CppIcon, + cmake: CMakeIcon, + css: CSS3Icon, + css3: CSS3Icon, + '^c$': CIcon, + '^cs$': CSharpIcon, + csharp: CSharpIcon, + go: GoIcon, + lua: LuaIcon, + js: JavaScriptIcon, + javascript: JavaScriptIcon, + java: JavaIcon, + json: JsonIcon, + python: PythonIcon, + py: PythonIcon, + perl: PerlIcon, + php: PhpIcon, + rs: RustIcon, + rust: RustIcon, + ts: TypeScriptIcon, + typescript: TypeScriptIcon, + yml: YamlIcon, + yaml: YamlIcon, + ruby: RubyIcon, + vb: VBIcon, + visualbasic: VBIcon, + xml: XMLIcon + } + + for (const key in logoMap) { + const regex = new RegExp(key, 'i') + if (regex.test(lang)) { + return logoMap[key] + } + } + + return undefined +}