From e1d2442f7c575fdf66946aa113dd889fa157c5d4 Mon Sep 17 00:00:00 2001
From: HPCesia <HPCesia@foxmail.com>
Date: Thu, 24 Oct 2024 16:11:45 +0800
Subject: [PATCH] feat: support to show the original name of language in the
 class of `figure` tag

---
 README.md       | 7 ++++++-
 README_zh-CN.md | 7 ++++++-
 src/main.ts     | 9 ++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 89468f8..a662093 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,11 @@ shiki:
   line_number: false # default: false
   strip_indent: true # default: true
   tab_replace: "  " # default: "  "
+  # Use the original language name in the figure tag
+  # For example, when the language of code block is 'js':
+  # original_lang_name: false => <figure class="highlighter js">
+  # original_lang_name: true => <figure class="highlighter javascript">
+  original_lang_name: false
   pre_style: true # Preserve the style of the <pre> tag. default: true
   default_color: light # Only take effect when using multiple themes. default: light
   css_variable_prefix: --shiki- # Only take effect when using multiple themes. default: --shiki-
@@ -117,7 +122,7 @@ If you are using [hexo-filter-mathjax](https://github.com/next-theme/hexo-filter
 
 #### Solution
 For example, if you are using the hexo-filter-mathjax plugin, modify the [this line](https://github.com/next-theme/hexo-filter-mathjax/blob/20dc61352f8cf4d19425ad1833eb72b467c212ef/index.js#L20C3-L20C40) in the source code:
-```js
+```diff
 - data.content = mathjax(data.content);
 + data.content = data.content.replace(
 +   /<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs,
diff --git a/README_zh-CN.md b/README_zh-CN.md
index 16beb86..6226a9f 100644
--- a/README_zh-CN.md
+++ b/README_zh-CN.md
@@ -44,6 +44,11 @@ shiki:
   line_number: false
   strip_indent: true
   tab_replace: "  "
+  # 在 figure 标签中类名使用语言原名
+  # 例如代码块语言为 'js' 时：
+  # original_lang_name: false => <figure class="highlighter js">
+  # original_lang_name: true => <figure class="highlighter javascript">
+  original_lang_name: false
   pre_style: true # 保留 <pre> 标签的样式，即主题的 `background-color`。
   default_color: light # 仅在同时使用多个主题时生效。默认值：light
   css_variable_prefix: --shiki- # 仅在同时使用多个主题时生效。默认值：--shiki-
@@ -110,7 +115,7 @@ fn main() {
 
 #### 解决方法
 以 hexo-filter-mathjax 插件为例，修改源代码中的[这一行](https://github.com/next-theme/hexo-filter-mathjax/blob/20dc61352f8cf4d19425ad1833eb72b467c212ef/index.js#L20C3-L20C40):
-```js
+```diff
 - data.content = mathjax(data.content);
 + data.content = data.content.replace(
 +   /<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs,
diff --git a/src/main.ts b/src/main.ts
index 8d30ca9..c81dcd8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -39,10 +39,13 @@ export async function init(hexo: Hexo) {
       line_number: false,
       strip_indent: true,
       tab_replace: "  ",
+      original_lang_name: false,
       pre_style: true,
       default_color: "light",
       css_variable_prefix: "--shiki-",
       transformers: [],
+      // TODO: 增加 `wrap` 选项，与 Hexo 的 highlight.js 渲染行为一致
+      // TODO: 增加 `beautify` 选项以适配更多主题
       additional: {
         themes: [],
         langs: [],
@@ -180,7 +183,11 @@ export async function init(hexo: Hexo) {
     // 合并标签
     const html = htmlTag(
       "figure",
-      { class: `highlight ${lang}` },
+      {
+        class: `highlight ${
+          config.original_lang_name && lang !== "text" ? highlighter.getLanguage(lang).name : lang
+        }`,
+      },
       caption +
         htmlTag(
           "table",