hexojs / hexo

A fast, simple & powerful blog framework, powered by Node.js.
https://hexo.io
MIT License
39.27k stars 4.83k forks source link

if set hljs to true in hexo config, it will cause some Tag Plugins no rendering #4317

Closed jerryc127 closed 4 years ago

jerryc127 commented 4 years ago

Check List

Please check followings before submitting a new issue.

Expected behavior

Actual behavior

How to reproduce?

Environment & Settings

Node.js & npm version

Your site _config.yml (Optional)

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  hljs: true

Your theme _config.yml (Optional)

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

+-- @babel/core@7.9.6 +-- @babel/preset-env@7.9.6 +-- eslint@6.8.0 +-- eslint-config-standard@14.1.1 +-- eslint-plugin-import@2.20.2 +-- eslint-plugin-node@11.1.0 +-- eslint-plugin-promise@4.2.1 +-- eslint-plugin-standard@4.0.1 +-- gulp@4.0.2 +-- gulp-babel@8.0.0 +-- gulp-clean-css@4.3.0 +-- gulp-htmlclean@2.7.22 +-- gulp-htmlmin@5.0.1 +-- gulp-imagemin@7.1.0 +-- gulp-uglify@3.0.2 +-- hexo@4.2.0 +-- hexo-abbrlink@2.0.5 +-- hexo-deployer-git@2.1.0 +-- hexo-douban@1.1.3 +-- hexo-generator-archive@1.0.0 +-- hexo-generator-category@1.0.0 +-- hexo-generator-feed@2.2.0 +-- hexo-generator-index@1.0.0 +-- hexo-generator-search@2.4.0 +-- hexo-generator-tag@1.0.0 +-- hexo-renderer-ejs@1.0.0 +-- hexo-renderer-marked@2.0.0 +-- hexo-renderer-pug@1.0.0 +-- hexo-renderer-stylus@1.1.0 +-- hexo-server@1.0.0 +-- hexo-tag-aplayer@3.0.4 +-- hexo-wordcount@6.0.1 `-- terser@4.6.11

Your package.json package.json

Others

When set hljs to false , it will show correct

image

but when set it to true image

markdown

 ```markdown
<div class="btn-center">
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}
</div>
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}
<div class="btn-center">
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline green larger %}
</div>
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline blue larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline pink larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline red larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline purple larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline orange larger %} {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline green larger %}

button.js
```js
/**
 * Button
 * {% btn url text icon option %}
 * option: color outline center block larger
 * color : default/blue/pink/red/purple/orange/green
 */

'use strict'

const urlFor = require('hexo-util').url_for.bind(hexo)

function btn (args) {
  args = args.join(' ').split(',')
  var url = args[0] || ''
  var text = args[1] || ''
  var icon = args[2] || ''
  var option = args[3] || ''

  url = url.trim()
  text = text.trim()
  icon = icon.trim()
  option = option.trim()

  return `<a class="btn-beautify button--primary button--animated ${option}" href="${urlFor(url)}" title="${text}">
  ${icon.length > 0 ? `<i class="${icon} fa-fw"></i>` : ''} ${text} </a>`
}

hexo.extend.tag.register('btn', btn, { ends: false })
SukkaW commented 4 years ago

It appears to be fixed in #4161 by @stevenjoezhang

I will add a test case to confirm if the issue has been fixed in coming hexo@5.

stevenjoezhang commented 4 years ago

The rendering result is affected by highlight.enable option https://github.com/hexojs/hexo/blob/956242e4e6f008c5a2e0d1feddaa4f3a7bb2251e/lib/plugins/filter/before_post_render/backtick_code_block.js#L11

Test cases:

```sh
echo "Hi"
```

{% post_link 'Hello World' "custom text here" %}

```sh
echo "Hi"
```

{% post_link 'Hello World' "custom text here" %}

```sh
echo "Hi"
```
jerryc127 commented 4 years ago

不知問題 修復了沒 今天把hljs设为true之后,发现报错了 image

定位到是一篇文章md有问题 然而我查了也没发现问题在哪 因为当hljs设为false时,这篇文章是能正常编译的。。

SukkaW commented 4 years ago

@jerryc127 Could be fixed in coming hexo@5.

The replated test case will be added.


Update

@jerryc127 The bug is now confirmed. Will be fixed by #4358.

jerryc127 commented 4 years ago

我把你改的那句正则复制到我的hexo对应的位置 运行不会报错了。。

good job