Rendering issue with Tag Plugin

[PeichengLiu]

Check List

• I have already read Docs page & Troubleshooting page
• I have already searched existing issues and they are not help to me
• I examined error or warning messages and it's difficult to solve
• Using the latest version of Hexo (run hexo version to check)
• Node.js is higher than minimum required version

Expected behavior

Fyi, I'm using https://github.com/next-theme/hexo-theme-next.

with

{% label @v1 %} v2

{% label @v3 %} v4

I would expect two paragraphs generated.

<p><mark class="label ">v1</mark> v2</p>
<p><mark class="label ">v3</mark> v4</p>

Actual behavior

No paragraphs generated.

<mark class="label ">v1</mark> v2

<mark class="label ">v3</mark> v4

How to reproduce?

https://github.com/PeichengLiu/for-hexo-rendering-issue is ready for your convenience.

Is the problem still there under "Safe mode"?

No HTML generated.

Environment & Settings

Node.js & npm version(node -v && npm -v)

v18.18.0
9.8.1

Your site _config.yml (Optional)

The only configuration I changed is theme: next, and no configuration for the theme itself.

Hexo and Plugin version(npm ls --depth 0)

hexo-site@0.0.0 C:\Users\14517\Desktop\test-blog\blog
├── hexo-generator-archive@2.0.0 -> .\node_modules\.pnpm\hexo-generator-archive@2.0.0\node_modules\hexo-generator-archive
├── hexo-generator-category@2.0.0 -> .\node_modules\.pnpm\hexo-generator-category@2.0.0\node_modules\hexo-generator-category
├── hexo-generator-index@3.0.0 -> .\node_modules\.pnpm\hexo-generator-index@3.0.0\node_modules\hexo-generator-index
├── hexo-generator-tag@2.0.0 -> .\node_modules\.pnpm\hexo-generator-tag@2.0.0\node_modules\hexo-generator-tag
├── hexo-renderer-ejs@2.0.0 -> .\node_modules\.pnpm\hexo-renderer-ejs@2.0.0\node_modules\hexo-renderer-ejs
├── hexo-renderer-marked@6.1.1 -> .\node_modules\.pnpm\hexo-renderer-marked@6.1.1\node_modules\hexo-renderer-marked
├── hexo-renderer-stylus@3.0.0 -> .\node_modules\.pnpm\hexo-renderer-stylus@3.0.0\node_modules\hexo-renderer-stylus
├── hexo-server@3.0.0 -> .\node_modules\.pnpm\hexo-server@3.0.0\node_modules\hexo-server
├── hexo-theme-landscape@1.0.0 -> .\node_modules\.pnpm\hexo-theme-landscape@1.0.0\node_modules\hexo-theme-landscape
├── hexo-theme-next@8.18.2 -> .\node_modules\.pnpm\hexo-theme-next@8.18.2\node_modules\hexo-theme-next
└── hexo@6.3.0 -> .\node_modules\.pnpm\hexo@6.3.0\node_modules\hexo

Your package.json package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-stylus": "^3.0.0",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^1.0.0",
    "hexo-theme-next": "^8.18.2"
  }
}

Others

I tried to dig out the root cause and fix it. It seems to be related to the way how Hexo implements Tag Plugins. I change

hexo/lib/hexo/post.js

Lines 16 to 17 in ad05652

	const rSwigPlaceHolder = /(?:<|&lt;)!--swig\uFFFC(\d+)--(?:>|&gt;)/g;
	const rCodeBlockPlaceHolder = /(?:<|&lt;)!--code\uFFFC(\d+)--(?:>|&gt;)/g;

to

const rSwigPlaceHolder = /swig(?:<|&lt;)!--\uFFFC(\d+)--(?:>|&gt;)/g;
const rCodeBlockPlaceHolder = /code(?:<|&lt;)!--\uFFFC(\d+)--(?:>|&gt;)/g;

, and

hexo/lib/hexo/post.js

Lines 37 to 39 in ad05652

	static escapeContent(cache, flag, str) {
	return `<!--${flag}\uFFFC${cache.push(str) - 1}-->`;
	}

to

  static escapeContent(cache, flag, str) {
    return `${flag}<!--\uFFFC${cache.push(str) - 1}-->`;
  }

. It solves the problem above, while it breaks unit tests. Which is another part I do not quite understand. For example, should not the following test

hexo/test/scripts/hexo/post.js

Lines 1249 to 1276 in ad05652

	it('render() - escape & recover multi {% raw %} and backticks', async () => {
	const content = [
	'`{{ 1 + 1 }}` {{ 1 + 2 }} `{{ 2 + 2 }}`',
	'Text',
	'{% raw %}',
	'Raw 1',
	'{% endraw %}',
	'Another Text',
	'{% raw %}',
	'Raw 2',
	'{% endraw %}'
	].join('\n');
	const data = await post.render(null, {
	content,
	engine: 'markdown'
	});
	data.content.trim().should.eql([
	`<p><code>${escapeSwigTag('{{ 1 + 1 }}')}</code> 3 <code>${escapeSwigTag('{{ 2 + 2 }}')}</code><br>Text</p>`,
	'',
	'Raw 1',
	'',
	'<p>Another Text</p>',
	'',
	'Raw 2'
	].join('\n'));
	});

expect

<p><code>{{ 1 + 1 }}</code> 3 <code>{{ 2 + 2 }}</code><br>Text<br>
Raw1
<br>AnotherText<br>
Raw2
</p>

? With a single \n between texts, how can Another Text be wrapped in a paragraph?

Finally, one another question, why Hexo is using an outdated markedjs with some copied code snippets and uncleared (to me) customization?

• An issue raised in Next (in Chinese), 使用 label 标签外挂在开头时，会导致无法换行 #707

Thanks for your work!

[uiolee]

This is probably a feature of hexo and not easy to change.
If you don't use <!-- --> to escape the tag, it will be wrapped in <p></p> by the markdown renderer, which may have side effects on some tags or themes.