Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

{% raw %} 无法渲染 ``` 代码段 #2400

Closed
OhYee opened this issue Feb 9, 2017 · 9 comments
Closed

{% raw %} 无法渲染 ``` 代码段 #2400

OhYee opened this issue Feb 9, 2017 · 9 comments

Comments

@OhYee
Copy link

OhYee commented Feb 9, 2017

hexo: 3.2.2
node: 6.2.1

{% raw %}
```cpp test
include <cstdio>
```
{% endraw %}

渲染出的是

undefined

@NoahDragon
Copy link
Member

确实是个问题。

这个Raw tag是Nunjucks里用来escape其syntax时用的。往往是当文本与Nunjucks syntax有冲突时才需要使用,如MathJax.
https://mozilla.github.io/nunjucks/templating.html#raw

@OhYee
Copy link
Author

OhYee commented Feb 10, 2017

@NoahDragon
如果我想自己写一个tag,功能是在content内容前后加上我写好的标签
当在代码块前后加使用这个功能就会导致 undefined
要解决这个问题就只能手动在代码块前后加标签不能用 tag 么

@haohuawu
Copy link

haohuawu commented Mar 24, 2017

我也发现了这个问题,只要是在Nunjucks的tag里写```代码块```,最终都会渲染成undefined。看了源码发现hexo对于```做了全局特殊处理。

举个例子,我想自定义一个tag,然后tag里面可以写markdown、我希望markdown的代码高亮用的是hexo自带的(自己写插件支持),这样使用tag:

{% api 简介 %}
### 简介

```
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
WebView.setWebContentsDebuggingEnabled(true);
}
}
```

{% endapi %}

我们看看 hexo 会对这段代码怎么处理:

第一阶段,api tag 中的 ``` 部分变成了:

{% api 简介 %}
### 简介

<!-- 0 -->

{% endapi %}

详见:https://github.com/hexojs/hexo/blob/master/lib/plugins/filter/before_post_render/backtick_code_block.js

第二阶段,转义Nunjucks标签,渲染markdown

<!-- 1-->

详见:https://github.com/hexojs/hexo/blob/master/lib/hexo/post.js#L276

第三阶段,还原标签内容,交由 hexo tag 处理

{% api 简介 %}
### 简介

<!-- 0 -->

{% endapi %}

详见:https://github.com/hexojs/hexo/blob/master/lib/hexo/post.js#L245

hexo tag拿到上面的内容会先转义,然后交给自定义的tag函数处理

这时候我们得到的内容:

{% api 简介 %}
### 简介

<!-- 0 -->

{% endapi %}

第四阶段,hexo tag 本身的渲染函数还原转义

{% api 简介 %}
### 简介

undefined

{% endapi %}

详见:https://github.com/hexojs/hexo/blob/master/lib/extend/tag.js#L68

好了,bug的产生过程有了,接下来提个建议:

hexo 不处理自定义tag里的```,可以让自定义tag自己处理或者等他处理完再处理,防止冲突。

那么,作为社区其他开发者怎么办呢?有解决办法吗?答案是有的,就是稍显麻烦,自己写2个filter:

const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});

hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

注意,placeholder 这个千万别和hexo(\uFFFC)的冲突了,选个其他的吧

@OhYee
Copy link
Author

OhYee commented Mar 24, 2017

@haohuawu
完美解决 感谢

@xiaomizhou66
Copy link

这个 filter 代码放在哪里呀

@OhYee
Copy link
Author

OhYee commented Jan 10, 2019

@xiaomizhou66
<BlogRoot>/scripts/tags.js

@luoxuzhi
Copy link

@xiaomizhou66
<BlogRoot>/scripts/tags.js

在博客的根目录加了这个js后怎么引用啊??

@OhYee
Copy link
Author

OhYee commented Jul 23, 2019

@luoxuzhi
在博客的根目录加了这个js后怎么引用啊??

Hexo会自己引入进去

zxzsaga pushed a commit to zxzsaga/hexo-theme-minos that referenced this issue Feb 26, 2020
ChieloNewctle pushed a commit to ChieloNewctle/hexo-theme-minos that referenced this issue Mar 25, 2020
@sshwy
Copy link

sshwy commented May 11, 2020

加一句:还有一个解决方案:使用hexo自带的codeblock tag

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants