Update readme

This commit is contained in:
HPCesia 2024-10-21 22:44:35 +08:00
parent 24afc3cc89
commit 1fc03405c3
2 changed files with 43 additions and 34 deletions

View File

@ -45,17 +45,21 @@ shiki:
line_number: false # default: false line_number: false # default: false
strip_indent: true # default: true strip_indent: true # default: true
tab_replace: " " # default: " " tab_replace: " " # default: " "
pre_style: true # Preserve the style of the <pre> tag, i.e., the theme's `background-color`. default: true pre_style: true # Preserve the style of the <pre> tag. default: true
default_color: light # Only take effect when using multiple themes. default: light 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- css_variable_prefix: --shiki- # Only take effect when using multiple themes. default: --shiki-
transformers: transformers:
# List of transformers to be enabled. # List of transformers to be enabled.
# Please refer to https://shiki.style/packages/transformers for the list of supported transformers. # Please refer to https://shiki.style/packages/transformers for the list of supported transformers.
- "example1" # You can omit `name` and `option` when no options are required, directly using the string. # You can omit `name` and `option` when no options are required, directly using the string.
- name: example2 # When additional option are required, please explicitly set name and option. - "example1"
# When additional option are required, please explicitly set name and option.
- name: example2
option: option:
# Options for the transformer, please check the @shikijs/transformer's source code to get the list of supported options # Options for the transformer.
# Source code of @shikijs/transformer: https://github.com/shikijs/shiki/tree/main/packages/transformers/src/transformers # Please check the @shikijs/transformer's source code to get the list of supported options
# Source code of @shikijs/transformer:
# https://github.com/shikijs/shiki/tree/main/packages/transformers/src/transformers
exampleOption1: exampleValue1 exampleOption1: exampleValue1
exampleOption2: exampleValue2 exampleOption2: exampleValue2
additional: additional:
@ -68,7 +72,19 @@ shiki:
your_alias2: lang_name2 your_alias2: lang_name2
``` ```
For example, if you want to mark some lines, you can use Hexo's code block tag plugin (which has been adapted by this plugin): Additionally, you can specify multiple themes in the `theme` option:
```yaml
shiki:
theme:
light: one-light
dark: one-dark-pro
# ...
```
See [Dual Themes](https://shiki.style/guide/dual-themes) for how to switch between multiple themes.
### Example of Using Transformers
if you want to mark some lines, you can use Hexo's code block tag plugin (which has been adapted by this plugin):
```markdown ```markdown
{% codeblock lang:rust mark:2 %} {% codeblock lang:rust mark:2 %}
fn main() { fn main() {
@ -82,8 +98,8 @@ But if you want to mark some lines in backtick code blocks, you can use transfor
transformers: transformers:
- name: transformerNotationHighlight - name: transformerNotationHighlight
option: option:
classActiveLine: marked # same to Hexo's code block tag marked line's class, default: highlighted classActiveLine: marked # same to Hexo's code block tag, default: highlighted
classActivePre: has-marked # default: has-highlighted classActivePre: "" # default: has-highlighted
``` ```
and add some comment to your code block: and add some comment to your code block:
````markdown ````markdown
@ -95,26 +111,17 @@ fn main() {
```` ````
The result is the same as the Hexo code block tag plugin. The result is the same as the Hexo code block tag plugin.
Additionally, you can specify multiple themes in the `theme` option:
```yaml
shiki:
theme:
light: one-light
dark: one-dark-pro
# ...
```
See [Dual Themes](https://shiki.style/guide/dual-themes) for how to switch between multiple themes.
## Bugs ## Bugs
### mathjax ### mathjax
If you are using [hexo-filter-mathjax](https://github.com/next-theme/hexo-filter-mathjax) or any other plugin that uses mathjax to render mathematical formulas locally, you may encounter an `Error: Can't find handler for document` when rendering articles that include code blocks and have mathjax rendering enabled. This is a problem with mathjax, as its LiteDOM adaptor cannot parse complex HTML fragments. If you are using [hexo-filter-mathjax](https://github.com/next-theme/hexo-filter-mathjax) or any other plugin that uses mathjax to render mathematical formulas locally, you may encounter an `Error: Can't find handler for document` when rendering articles that include code blocks and have mathjax rendering enabled. This is a problem with mathjax, as its LiteDOM adaptor cannot parse complex HTML fragments.
#### Solution #### 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: 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 ```js
- data.content = mathjax(data.content); - data.content = mathjax(data.content);
+ data.content = data.content.replace(/<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs, mathjax); + data.content = data.content.replace(
+ /<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs,
+ mathjax);
``` ```
This will prevent rendering errors for complex HTML fragments that result in `Can't find handler for document`. This will prevent rendering errors for complex HTML fragments that result in `Can't find handler for document`.

View File

@ -66,7 +66,18 @@ shiki:
your_alias2: lang_name2 your_alias2: lang_name2
``` ```
例如,如果你想标记某些行,你可以使用 Hexo 的代码块标签插件(本插件对其做了适配): 额外地,你可以在 `theme` 选项中指定多个主题:
```yaml
shiki:
theme:
light: one-light
dark: one-dark-pro
# ...
```
在 [Dual Themes](https://shiki.style/guide/dual-themes) 中查看如何切换多个主题。
### 转换器使用示例
如果你想标记某些行,你可以使用 Hexo 的代码块标签插件(本插件对其做了适配):
```markdown ```markdown
{% codeblock lang:rust mark:2 %} {% codeblock lang:rust mark:2 %}
fn main() { fn main() {
@ -81,7 +92,7 @@ transformers:
- name: transformerNotationHighlight - name: transformerNotationHighlight
option: option:
classActiveLine: marked # 与 Hexo 的代码块标签标记行的类相同默认值highlighted classActiveLine: marked # 与 Hexo 的代码块标签标记行的类相同默认值highlighted
classActivePre: '' # 默认值has-highlighted classActivePre: "" # 默认值has-highlighted
``` ```
并在你的代码块中添加一些注释: 并在你的代码块中添加一些注释:
````markdown ````markdown
@ -93,26 +104,17 @@ fn main() {
```` ````
结果与 Hexo 的代码块标签插件相同。 结果与 Hexo 的代码块标签插件相同。
额外地,你可以在 `theme` 选项中指定多个主题:
```yaml
shiki:
theme:
light: one-light
dark: one-dark-pro
# ...
```
在 [Dual Themes](https://shiki.style/guide/dual-themes) 中查看如何切换多个主题。
## Bugs ## Bugs
### mathjax ### mathjax
如果你正在使用 [hexo-filter-mathjax](https://github.com/next-theme/hexo-filter-mathjax) 或其他任意在本地使用 mathjax 渲染数学公式的插件,在渲染包含代码块且开启 mathjax 渲染的文章时可能会出现 `Error: Can't find handler for document`。这是 mathjax 的问题mathjax 的 LiteDOM adaptor 无法解析复杂的 HTML 片段。 如果你正在使用 [hexo-filter-mathjax](https://github.com/next-theme/hexo-filter-mathjax) 或其他任意在本地使用 mathjax 渲染数学公式的插件,在渲染包含代码块且开启 mathjax 渲染的文章时可能会出现 `Error: Can't find handler for document`。这是 mathjax 的问题mathjax 的 LiteDOM adaptor 无法解析复杂的 HTML 片段。
#### 解决方法 #### 解决方法
以 hexo-filter-mathjax 插件为例,修改源代码中的[这一行](https://github.com/next-theme/hexo-filter-mathjax/blob/20dc61352f8cf4d19425ad1833eb72b467c212ef/index.js#L20C3-L20C40): 以 hexo-filter-mathjax 插件为例,修改源代码中的[这一行](https://github.com/next-theme/hexo-filter-mathjax/blob/20dc61352f8cf4d19425ad1833eb72b467c212ef/index.js#L20C3-L20C40):
```js ```js
- data.content = mathjax(data.content); - data.content = mathjax(data.content);
+ data.content = data.content.replace(/<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs, mathjax); + data.content = data.content.replace(
+ /<span\s+class="math\s+[^"]*">\\[\(\[].*?\\[\)\]]<\/span>/gs,
+ mathjax);
``` ```
这可以避免对那些复杂的 HTML 片段进行渲染导致的 `Can't find handler for document` 错误。 这可以避免对那些复杂的 HTML 片段进行渲染导致的 `Can't find handler for document` 错误。