From 1951ed01e790105af34eeb346f394cff931bcdd5 Mon Sep 17 00:00:00 2001 From: imoyy Date: Fri, 5 Sep 2025 01:10:04 +0800 Subject: [PATCH] feat: add programming language icons to codeblock header. --- src/renderer/src/assets/images/lang/c.svg | 1 + src/renderer/src/assets/images/lang/cmake.svg | 1 + .../src/assets/images/lang/cplusplus.svg | 6 ++ .../src/assets/images/lang/csharp.svg | 1 + src/renderer/src/assets/images/lang/css3.svg | 1 + src/renderer/src/assets/images/lang/go.svg | 1 + src/renderer/src/assets/images/lang/java.svg | 1 + .../src/assets/images/lang/javascript.svg | 1 + src/renderer/src/assets/images/lang/json.svg | 1 + src/renderer/src/assets/images/lang/lua.svg | 1 + src/renderer/src/assets/images/lang/php.svg | 2 + .../src/assets/images/lang/python.svg | 1 + src/renderer/src/assets/images/lang/ruby.svg | 1 + src/renderer/src/assets/images/lang/rust.svg | 1 + .../src/assets/images/lang/typescript.svg | 1 + src/renderer/src/assets/images/lang/vb.svg | 1 + src/renderer/src/assets/images/lang/xml.svg | 1 + src/renderer/src/assets/images/lang/yaml.svg | 6 ++ .../src/components/CodeBlockView/view.tsx | 16 +++- src/renderer/src/config/lang.ts | 84 +++++++++++++++++++ 20 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 src/renderer/src/assets/images/lang/c.svg create mode 100644 src/renderer/src/assets/images/lang/cmake.svg create mode 100644 src/renderer/src/assets/images/lang/cplusplus.svg create mode 100644 src/renderer/src/assets/images/lang/csharp.svg create mode 100644 src/renderer/src/assets/images/lang/css3.svg create mode 100644 src/renderer/src/assets/images/lang/go.svg create mode 100644 src/renderer/src/assets/images/lang/java.svg create mode 100644 src/renderer/src/assets/images/lang/javascript.svg create mode 100644 src/renderer/src/assets/images/lang/json.svg create mode 100644 src/renderer/src/assets/images/lang/lua.svg create mode 100644 src/renderer/src/assets/images/lang/php.svg create mode 100644 src/renderer/src/assets/images/lang/python.svg create mode 100644 src/renderer/src/assets/images/lang/ruby.svg create mode 100644 src/renderer/src/assets/images/lang/rust.svg create mode 100644 src/renderer/src/assets/images/lang/typescript.svg create mode 100644 src/renderer/src/assets/images/lang/vb.svg create mode 100644 src/renderer/src/assets/images/lang/xml.svg create mode 100644 src/renderer/src/assets/images/lang/yaml.svg create mode 100644 src/renderer/src/config/lang.ts 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..5197f2a955 --- /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/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 46f6cbce86..37d543efb4 100644 --- a/src/renderer/src/components/CodeBlockView/view.tsx +++ b/src/renderer/src/components/CodeBlockView/view.tsx @@ -16,6 +16,7 @@ import CodeViewer from '@renderer/components/CodeViewer' import ImageViewer from '@renderer/components/ImageViewer' import { 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' @@ -282,8 +283,13 @@ 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 ( + + {logo ? {language} : ''} + {language} + + ) }, [isInSpecialView, language]) // 根据视图模式和语言选择组件，优先展示特殊视图，fallback是源代码视图 @@ -359,6 +365,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: 16px; + height: 16px; + margin-right: 8px; + } ` const SplitViewWrapper = styled.div<{ $isSpecialView: boolean; $isSplitView: boolean }>` diff --git a/src/renderer/src/config/lang.ts b/src/renderer/src/config/lang.ts new file mode 100644 index 0000000000..975e9f59c0 --- /dev/null +++ b/src/renderer/src/config/lang.ts @@ -0,0 +1,84 @@ +/** + * @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 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 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) { + const isLight = true + + if (!lang) { + return undefined + } + + const logoMap = { + TS: isLight ? TypeScriptIcon : TypeScriptIcon, + TypeScript: isLight ? TypeScriptIcon : TypeScriptIcon, + JS: isLight ? JavaScriptIcon : JavaScriptIcon, + JavaScript: isLight ? JavaScriptIcon : JavaScriptIcon, + Python: isLight ? PythonIcon : PythonIcon, + PY: isLight ? PythonIcon : PythonIcon, + Java: isLight ? JavaIcon : JavaIcon, + CPP: isLight ? CppIcon : CppIcon, + CMake: isLight ? CMakeIcon : CMakeIcon, + '^c$': isLight ? CIcon : CIcon, + csharp: isLight ? CSharpIcon : CSharpIcon, + Go: isLight ? GoIcon : GoIcon, + Json: isLight ? JsonIcon : JsonIcon, + Rust: isLight ? RustIcon : RustIcon, + Yaml: isLight ? YamlIcon : YamlIcon, + Php: isLight ? PhpIcon : PhpIcon, + Ruby: isLight ? RubyIcon : RubyIcon, + Lua: isLight ? LuaIcon : LuaIcon, + CSS: isLight ? CSS3Icon : CSS3Icon, + CSS3: isLight ? CSS3Icon : CSS3Icon, + XML: isLight ? XMLIcon : XMLIcon, + vb: isLight ? VBIcon : VBIcon, + visualbasic: isLight ? VBIcon : VBIcon, + HTML: isLight ? XMLIcon : XMLIcon + } + + for (const key in logoMap) { + const regex = new RegExp(key, 'i') + if (regex.test(lang)) { + return logoMap[key] + } + } + + return undefined +}