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}
+
+ )
}, [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
+}