fix: nunjucks/code blocks in HTML comments were incorrectly converted (#5616)

* fix: nunjucks/codefence nesting in comments

* fix: code fence nesting in comments

* Revert "fix: code fence nesting in comments"

This reverts commit 33bdd82.

* fix: code fence nesting in comments

---------

Signed-off-by: D-Sketon <2055272094@qq.com>

Author: D-Sketon

lib/hexo/post.ts

@@ -13,10 +13,12 @@ import type { NodeJSLikeCallback, RenderData } from '../types';
 const preservedKeys = ['title', 'slug', 'path', 'layout', 'date', 'content'];
 
 const rHexoPostRenderEscape = /<hexoPostRenderCodeBlock>([\s\S]+?)<\/hexoPostRenderCodeBlock>/g;
+const rCommentEscape = /(<!--[\s\S]*?-->)/g;
 const rSwigTag = /(\{\{.+?\}\})|(\{#.+?#\})|(\{%.+?%\})/s;
 
 const rSwigPlaceHolder = /(?:<|&lt;)!--swig\uFFFC(\d+)--(?:>|&gt;)/g;
 const rCodeBlockPlaceHolder = /(?:<|&lt;)!--code\uFFFC(\d+)--(?:>|&gt;)/g;
+const rCommentHolder = /(?:<|&lt;)!--comment\uFFFC(\d+)--(?:>|&gt;)/g;
 
 const STATE_PLAINTEXT = 0;
 const STATE_SWIG_VAR = 1;
@@ -61,6 +63,14 @@ class PostRenderEscape {
     return str.replace(rCodeBlockPlaceHolder, PostRenderEscape.restoreContent(this.stored));
   }
 
+  restoreComments(str: string) {
+    return str.replace(rCommentHolder, PostRenderEscape.restoreContent(this.stored));
+  }
+
+  escapeComments(str: string) {
+    return str.replace(rCommentEscape, (_, content) => PostRenderEscape.escapeContent(this.stored, 'comment', content));
+  }
+
   escapeCodeBlocks(str: string) {
     return str.replace(rHexoPostRenderEscape, (_, content) => PostRenderEscape.escapeContent(this.stored, 'code', content));
   }
@@ -502,6 +512,8 @@ class Post {
       // Run "before_post_render" filters
       return ctx.execFilter('before_post_render', data, { context: ctx });
     }).then(() => {
+      // Escape all comments to avoid conflict with Nunjucks and code block
+      data.content = cacheObj.escapeComments(data.content);
       data.content = cacheObj.escapeCodeBlocks(data.content);
       // Escape all Nunjucks/Swig tags
       let hasSwigTag = true;
@@ -535,6 +547,7 @@ class Post {
       }, options);
     }).then(content => {
       data.content = cacheObj.restoreCodeBlocks(content);
+      data.content = cacheObj.restoreComments(data.content);
 
       // Run "after_post_render" filters
       return ctx.execFilter('after_post_render', data, { context: ctx });

lib/plugins/filter/before_post_render/backtick_code_block.ts

@@ -1,10 +1,13 @@
 import type { HighlightOptions } from '../../../extend/syntax_highlight';
 import type Hexo from '../../../hexo';
 import type { RenderData } from '../../../types';
+import assert from 'assert';
 
 const rBacktick = /^((?:(?:[^\S\r\n]*>){0,3}|[-*+]|[0-9]+\.)[^\S\r\n]*)(`{3,}|~{3,})[^\S\r\n]*((?:.*?[^`\s])?)[^\S\r\n]*\n((?:[\s\S]*?\n)?)(?:(?:[^\S\r\n]*>){0,3}[^\S\r\n]*)\2[^\S\r\n]?(\n+|$)/gm;
 const rAllOptions = /([^\s]+)\s+(.+?)\s+(https?:\/\/\S+|\/\S+)\s*(.+)?/;
 const rLangCaption = /([^\s]+)\s*(.+)?/;
+const rCommentEscape = /(<!--[\s\S]*?-->)/g;
+const rCommentHolder = /(?:<|&lt;)!--comment\uFFFC(\d+)--(?:>|&gt;)/g;
 const rAdditionalOptions = /\s((?:line_number|line_threshold|first_line|wrap|mark|language_attr|highlight):\S+)/g;
 
 const escapeSwigTag = (str: string) => str.replace(/{/g, '&#123;').replace(/}/g, '&#125;');
@@ -80,13 +83,44 @@ function parseArgs(args: string) {
   };
 }
 
+class CodeBlockEscape {
+  public stored: string[];
+
+  constructor() {
+    this.stored = [];
+  }
+
+  static escapeContent(cache: string[], flag: string, str: string) {
+    return `<!--${flag}\uFFFC${cache.push(str) - 1}-->`;
+  }
+
+  static restoreContent(cache: string[]) {
+    return (_: string, index: number) => {
+      assert(cache[index]);
+      const value = cache[index];
+      cache[index] = null;
+      return value;
+    };
+  }
+
+  restoreComments(str: string) {
+    return str.replace(rCommentHolder, CodeBlockEscape.restoreContent(this.stored));
+  }
+
+  escapeComments(str: string) {
+    return str.replace(rCommentEscape, (_, content) => CodeBlockEscape.escapeContent(this.stored, 'comment', content));
+  }
+
+}
+
 export = (ctx: Hexo): (data: RenderData) => void => {
   return function backtickCodeBlock(data: RenderData): void {
     const dataContent = data.content;
 
     if ((!dataContent.includes('```') && !dataContent.includes('~~~')) || !ctx.extend.highlight.query(ctx.config.syntax_highlighter)) return;
-
-    data.content = dataContent.replace(rBacktick, ($0, start, $2, _args, _content, end) => {
+    const cacheObj = new CodeBlockEscape();
+    data.content = cacheObj.escapeComments(data.content);
+    data.content = data.content.replace(rBacktick, ($0, start, $2, _args, _content, end) => {
       let content = _content.replace(/\n$/, '');
 
       // neither highlight or prismjs is enabled, return escaped content directly.
@@ -148,5 +182,6 @@ export = (ctx: Hexo): (data: RenderData) => void => {
         + '</hexoPostRenderCodeBlock>'
         + end;
     });
+    data.content = cacheObj.restoreComments(data.content);
   };
 };

test/scripts/hexo/post.ts

@@ -1601,4 +1601,63 @@ describe('Post', () => {
 
     data.content.should.eql('<a href="https://hexo.io/" title="tttitle" target="">foobar</a>');
   });
+
+  // https://github.com/hexojs/hexo/issues/5433
+  it('render() - nunjucks nesting in comments', async () => {
+    const content = [
+      'foo',
+      '<!--',
+      '{% raw %}',
+      'test',
+      '{% endraw %}',
+      '-->',
+      'bar'
+    ].join('\n');
+
+    const data = await post.render('', {
+      content,
+      engine: 'markdown'
+    });
+
+    data.content.should.eql([
+      '<p>foo</p>',
+      '<!--',
+      '{% raw %}',
+      'test',
+      '{% endraw %}',
+      '-->',
+      '<p>bar</p>',
+      ''
+    ].join('\n'));
+  });
+
+  // https://github.com/hexojs/hexo/issues/5433
+  it('render() - code fence nesting in comments', async () => {
+    const code = 'alert("Hello world")';
+    const content = [
+      'foo',
+      '<!--',
+      '```',
+      code,
+      '```',
+      '-->',
+      'bar'
+    ].join('\n');
+
+    const data = await post.render('', {
+      content,
+      engine: 'markdown'
+    });
+
+    data.content.should.eql([
+      '<p>foo</p>',
+      '<!--',
+      '```',
+      code,
+      '```',
+      '-->',
+      '<p>bar</p>',
+      ''
+    ].join('\n'));
+  });
 });