volantis-x/hexo-theme-volantis

【问题】:折叠标签内的 Highlight.js 代码块丢失换行

66Leo66 opened this issue · 8 comments

检查清单

  • 已经搜索过,没有发现类似 issue。
  • 已经搜索过主题文档,没有发现相关内容。
  • 已经尝试使用过最新版,问题依旧存在。

主题版本

6.x

复现地址

https://blog.6leo6.com/Typography/

问题描述

image
Source Code:

```bash
echo This is line one
cat << EOF
These are more lines
EOF
```

{% folding 折叠的代码块 %}
```bash
echo This is line one
cat << EOF
These are more lines
EOF
```
{% endfolding %}

非常奇怪的是,完全相同的内容,本地生成时是没有问题的:
image

渲染器是 hexo-renderer-pandoc

另:线上与本地都大量出现console warning:

highlight.min.js:263 One of your code blocks includes unescaped HTML. This is a potentially serious security risk.

配置文件

站点配置文件

https://github.com/66Leo66/blog.6leo6.com/blob/main/_config.yml

主题配置文件

https://github.com/66Leo66/blog.6leo6.com/blob/main/_config.volantis.yml

环境信息

线上环境 (Github Actions)

本地环境 (Windows 11 22H2)

node.js & npm

$  node -v && npm -v
v16.16.0
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
9.2.0

package.json

$ npm ls --depth 0
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
hexo-site@0.0.0 C:\***\blog.6leo6.com
+-- hexo-deployer-git@3.0.0
+-- hexo-filter-mathjax@0.9.0
+-- hexo-generator-archive@2.0.0
+-- hexo-generator-category@2.0.0
+-- hexo-generator-feed@3.0.0
+-- hexo-generator-index@3.0.0
+-- hexo-generator-json-content@4.2.3
+-- hexo-generator-tag@2.0.0
+-- hexo-helper-qrcode@1.0.2
+-- hexo-migrator-wordpress@2.1.2
+-- hexo-renderer-ejs@2.0.0
+-- hexo-renderer-pandoc@0.3.1
+-- hexo-renderer-stylus@2.1.0
+-- hexo-server@3.0.0
`-- hexo@6.3.0

Tikas commented

此测试没有关闭 highlight,并不符合本主题的测试需求,故折叠起来:

使用 demo 测试

使用 Volantis demo 本地测试没有问题

测试环境

  • OS:

    windows 11 22H2 (22621.1105)

  • node-js:

    18.12.1

  • npm:

    8.19.2

  • hexo-cli:

    4.3.0

  • Volantis:

    5.7.7

测试过程复盘

  • 1.使用 volantis 快速体验的 demo 为测试主体
git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s
  • 2.在 source > _posts 里新建一个测试文章:test.md, 内容如下
---
title: test
date: 2013-12-25 00:14:39
tags:
---

```bash
echo This is line one
cat << EOF
These are more lines
EOF
```

{% folding 折叠的代码块 %}
```bash
echo This is line one
cat << EOF
These are more lines
EOF
```
{% endfolding %}

测试结果

image

此问题在关闭自带highlight(服务端高亮)后出现

(而根据volantis文档,此操作为启用客户端highlight.js的要求)
_config.yml 中设置:

highlight:
  enable: false

然后 hexo cl && hexo s
即可复现。

Tikas commented

二次测试依旧没有关闭 highlight,并不符合本主题的测试需求,折叠起来:

使用最新版本的 volantis 测试

使用 Volantis 最新版本,本地测试没有问题

测试环境

  • Volantis:

    Volantis 6.0.0-alpha.1

测试过程复盘

在一个全新的文件夹里测试,过程如下:

  • 1、全新生成 hexo 构架
hexo init
  • 2、修改默认主题为 Volantis
theme: volantis
  • 3、为测试的 hexo 构架初始化 git
git init
  • 4、将主题仓库添加为子模块
git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
  • 5、将主题仓库切换为 6.0 分支
cd themes/volantis
git checkout 6.0
  • 6、更新主题
git pull
  • 7、创建测试文档
---
title: test
date: 2013-12-25 00:14:39
tags:
---

```bash
echo This is line one
cat << EOF
These are more lines
EOF
```

{% folding 折叠的代码块 %}
```bash
echo This is line one
cat << EOF
These are more lines
EOF
```
{% endfolding %}

测试结果

image

前提条件:
_config.yml

highlight:
  enable: false

环境:
其他完全相同,主题版本6.0,创建新的仓库测试

  • Windows
    markdown-renderer-marked: 折叠标签内换行丢失
    markdown-renderer-pandoc: 折叠标签内换行正常

  • Ubuntu (Github Codespaces)
    markdown-renderer-pandoc: 折叠标签内换行丢失

Tikas commented

之前去吃饭,然后睡个午觉回来发现你已经测试过了,那我就不再测试了。

其实我在第二次测试时,看到你的回复了,可是到了饭点,只能先放一边了。

复现了一下,确实不会换行。

if (style != undefined) {
return `<details ${style}><summary> ${title} </summary>
<div class='content'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>
</details>`;
}
return `<details><summary> ${title} </summary>
<div class='content'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>
</details>`;
}

以上代码在处理折叠内容时把换行全部去除了。

推测本地Windows换行没有问题的原因可能是\r\n处理后剩下了一个\r
Linux环境下\n就直接没了