ele828 / hexo-prism-plugin

Hexo plugin for code highlighting by prism.js, supporting JSX syntax

Hexo-Prism-Plugin

Since highlight.js didn't support JSX syntax properly, I wrote this plugin to replace Hexo's default code highlight plugin.

Install

npm i -S hexo-prism-plugin

Usage

Firstly, you should edit your _config.yml by adding following configuration.

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'default'
  line_number: false    # default false
  custom_css: 'path/to/your/custom.css'     # optional

After that, check highlight option in _config.yml. Make sure that default code highlight plugin is disabled.

highlight:
  enable: false

Finally, clean and re-generate your project by running following commands:

hexo clean

hexo generate

Options

• mode:

  • realtime (Parse code on browser in real time)
  • preprocess (Preprocess code in node)

• theme:

  • default
  • coy
  • dark
  • funky
  • okaidia
  • solarizedlight
  • tomorrow
  • twilight
  • atom-dark
  • base16-ateliersulphurpool.light
  • cb
  • duotone-dark
  • duotone-earth
  • duotone-forest
  • duotone-light
  • duotone-sea
  • duotone-space
  • ghcolors
  • hopscotch
  • pojoaque
  • vs
  • xonokai

• line_number:

  • true (Show line numbers)
  • false (Default, Hide line numbers)

• no_assets

  • true (Stop loading asset files)
  • false (Default, load script and stylesheets files)

Themes

You can check out prism-themes project for additional theme preview:

https://github.com/PrismJS/prism-themes#available-themes

Supported languages

You could find the supported languages here:

http://prismjs.com/#languages-list

License

MIT

hexo-prism-plugin's Issues

Failed to highlight code when contains captions

I have encountered the following issue when the code block has a caption, it fails to recognize as a code block. For example the following code block for bash git_commit_source.sh

prism代码高亮中的注释，中文乱码

prism代码高亮中的注释，中文乱码

original code

其他的地方，中文显示都是正常的；用自带的code hightlight也显示正常。
何解？~thks

How to use prism in markdown file?

There should be a demo for using prism in markdown file.

Error: template not found: base.html

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
Error: template not found: base.html
at Object.exports.prettifyError (D:\hexo\node_modules\hexo\node_modules\nunjucks\src\lib.js:34:15)
at D:\hexo\node_modules\hexo\node_modules\nunjucks\src\environment.js:485:31
at eval (eval at _compile (D:\hexo\node_modules\hexo\node_modules\nunjucks\src\environment.js:564:24), :15:11)

没有效果？

安装配置后，运行没效果，还是未渲染的状态。

<pre>
    <code class="javascript">
    import { AppContainer } from 'react-hot-loader'
    </code>
</pre>

经过 debug，发现 after_post_render 没有执行。

hexo.extend.filter.register('after_post_render', PrismPlugin);

我用了 theme: next，临时禁用后，有效果。这是 hexo-theme-next 的问题？

Not support ejs

Not support ejs, can you add ejs?

Maybe you should change it?

cosnt baseDir = hexo.base_dir
if (hexo.config.root && hexo.config.root !== '/')
  baseDir += hexo.config.root;

it should be change to

var adfaeawefwa = hexo.base_dir
if (hexo.config.root && hexo.config.root !== '/')
  adfaeawefwa += hexo.config.root;
const baseDir = adfaeawefwa;

when i run it,it have error

TypeError: Assignment to constant variable.

无法加载prism

安装之后,关闭hexo默认highlight,报错

highlight:
  enable: false

错误信息如下：

Template render error: (unknown path) [Line 49, Column 23]
  expected variable end
    at Object.exports.prettifyError (D:\Portable\Code\Blog\node_modules\nunjucks\src\lib.js:34:15)
    at new_cls.render (D:\Portable\Code\Blog\node_modules\nunjucks\src\environment.js:469:27)
    at new_cls.renderString (D:\Portable\Code\Blog\node_modules\nunjucks\src\environment.js:327:21)
    at D:\Portable\Code\Blog\node_modules\hexo\lib\extend\tag.js:66:9
    at Promise._execute (D:\Portable\Code\Blog\node_modules\bluebird\js\release\debuggability.js:300:9)
    at Promise._resolveFromExecutor (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:483:18)
    at new Promise (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:79:10)
    at Tag.render (D:\Portable\Code\Blog\node_modules\hexo\lib\extend\tag.js:64:10)
    at Object.tagFilter [as onRenderEnd] (D:\Portable\Code\Blog\node_modules\hexo\lib\hexo\post.js:266:16)
    at D:\Portable\Code\Blog\node_modules\hexo\lib\hexo\render.js:65:19
    at tryCatcher (D:\Portable\Code\Blog\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:693:18)
    at Async._drainQueue (D:\Portable\Code\Blog\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (D:\Portable\Code\Blog\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues [as _onImmediate] (D:\Portable\Code\Blog\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:781:20)
    at tryOnImmediate (timers.js:743:5)
    at processImmediate [as _immediateCallback] (timers.js:714:5)

打开默认highlight,代码块无高亮

node version: v8.2.1
npm version: 5.3.0
hexo version:
hexo: 3.3.8
hexo-cli: 1.0.3
os: Windows_NT 10.0.15063 win32 x64
http_parser: 2.7.0
node: 8.2.1
v8: 5.8.283.41
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

hexo-prism-plugin 已按照要求安装,_config未添加指定配置项会提示

ERROR Plugin load failed: hexo-prism-plugin
Error: `prism_plugin` options should be added to _config.yml file
    at D:\Portable\Code\Blog\node_modules\hexo-prism-plugin\src\index.js:70:9
    at D:\Portable\Code\Blog\node_modules\hexo\lib\hexo\index.js:232:12
    at tryCatcher (D:\Portable\Code\Blog\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:693:18)
    at Promise._fulfill (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:638:18)
    at Promise._resolveCallback (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:432:57)
    at Promise._settlePromiseFromHandler (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:524:17)
    at Promise._settlePromise (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:693:18)
    at Promise._fulfill (D:\Portable\Code\Blog\node_modules\bluebird\js\release\promise.js:638:18)
    at D:\Portable\Code\Blog\node_modules\bluebird\js\release\nodeback.js:42:21
    at D:\Portable\Code\Blog\node_modules\graceful-fs\graceful-fs.js:78:16
    at tryToString (fs.js:513:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:501:12)

可以自定义字体吗？

Syntax highlighting does't work

Hi,
I'm unable to see any highlighting work. I've configured config.yml correctly as well

highlight:
  enable: false
  # line_number: true
  # auto_detect: false
  # tab_replace:
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'okaidia'
  line_number: false    # default false

Expectation: .js code in markdown to be highlighted. Below is a screenshot from text editor

Behaviour: No highlighting in the web browser

No errors in browser console either.
Not sure what's going on...

highlight doesn't work

I have done what README told me to do, such as false the highlight and install and add prism_plugin . But it just doesn't work

HTML Not Escaped

With highlight: false, HTML is no longer escaped inside code blocks in Hexo.

Line number may be misplaced when additional themes is used

I suppose this is caused by specific theme styles' incompatibility. Most of the themes work well, only some of them are misplaced.

vs theme:

hexo-prism-plugin won't work with hexo-theme-next

The next theme has its own code highlight plugin. The hexo-prism-plugin seem to have no effect.

prism不起作用

我尝试将prism_plugin的设置代码插入到/_config.yml或者/theme/some_theme/_config.yml，但是实际生成的页面并没有prism高亮的代码块

cannot support ejs

Tag Plugins 引用的代码没有分行

使用这行语句显示的代码没有分行：
{% include_code lotto cpp lotto.cpp %}
一般情况下的的代码没有问题

Prism doesn't work. ( hexo-prism-plugin 2.0 )

I just update hexo-prism-plugin version 2.0 , and I run it as hexo clean&hexo s. But it still doesn't work.

静态资源无法加载

调试报错：Refused to apply style from 'http://localhost:4000/css/prism_atom-dark.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

install插件的时候说rollback了
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'D:\BLOG\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]:
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

Use an old dependency

+-- [email protected]
| +-- [email protected]
| | -- [email protected]  deduped
| -- [email protected]
+-- [email protected]
| -- [email protected]  deduped
-- [email protected]
  -- [email protected]

It will cause putting "(node:21196) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated."

line_number not shown

I set line_number to true and line_number not work.

See https://liyin.date/2017/01/21/Minecraft-with-Docker/

hexo-prism-plugin Markdown 不起作用

我的博客是通过markdown文件，然后生成的html。
按照readme 安装了插件，不起作用。
设置如下：

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace:
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess 
  theme: 'okaidia'
  line_number: false    # default false 

Hexo Prism渲染错误

我的配置
hexo: 4.2.0
hexo-cli: 3.1.0
os: Windows_NT 10.0.18363 win32 x64
node: 12.14.0
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
hexo s加载流畅
不过渲染过后跟没有prism一样
而且C++的include <...>中的<...>会被吃掉
求解决方法
主题:Hexo-theme-yun

建议可以自定义prism.js

插件里面的 prism.js 太大了，影响加载速度，建议可以使用自己配置的 prism.js

怎么在右上角显示语言类型、copy按钮

如题。使用这个插件，可以方便地设置显示行号。但是要想显示语言类型及copy按钮该怎么做？有相关设置吗？

error prism_plugin should be added to config_

Today ,I install this plugin but npm always said that ,so what should i do?

The highlight does not work

I followed the ReadMe.md and set the _config.yml
`
highlight:
enable: false
line_number: false
auto_detect: false
tab_replace:

prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'coy'
line_number: false # default false
auto_import_assets: true
`

However, the code highlight does not shown and the theme also does not work.

无法和markdown-it-plus同时使用

由于需要使用katex，所以安装了markdown-it-plus,但是安装后代码块无法高亮

prism插件会集成在这个插件上嘛?

在https://prismjs.com/#plugins 上面显示 prism有很多插件, 但仅靠现阶段的hexo-prism-lpugin还不能支持直接配置这些插件吧?

Plugins
Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.

Line Highlight
Line Numbers
Show Invisibles
Autolinker
WebPlatform Docs
Custom Class
File Highlight
Show Language
JSONP Highlight
Highlight Keywords
Remove initial line feed
Previewers
Autoloader
Keep Markup
Command Line
Unescaped Markup
Normalize Whitespace
Data-URI Highlight
Toolbar
Copy to Clipboard Button

external links does not support

custom_css: 'https://cdn.example.com/prism-tomorrow.css'

I want to use my own CDN CSS
But there is no configuration
custom_css is Relative path

const prismThemeFilePath = custom_css === null ? prismTheme.path : path.join(hexo.base_dir, custom_css);

line number is not show

In my hexo blog website , i will use material theme and use hexo-prism-plugin to let code hightlight.
but when i use hexo s or hexo d deploy to my blog website,they don't show the code line number.so what's wrong?
This is my picture

Thanks.

Something wrong when code rendered by the plugin

My plugin config:

The code render on my blog:

Does anybody know what wrong it is?

Custom css doesn't work

So custom css doesn't work if I download package from npm. However when I install it directly from this repository all works.

What I have discovered is that probably there is wrong version published into npm since src/index.js in node_modules is different than one in this repository.

Cannot read property 'theme' of undefined

the installation information

$ npm i -S hexo-prism-plugin [email protected] D:\hexo\blog -- [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})
`
when I executed hexo clean, an error occurred.

**ERROR Plugin load failed: hexo-prism-plugin TypeError: Cannot read property 'theme' of undefined** at D:\hexo\blog\node_modules\hexo-prism-plugin\index.js:23:48 at D:\hexo\blog\node_modules\hexo\lib\hexo\index.js:229:12 at tryCatcher (D:\hexo\blog\node_modules\bluebird\js\release\util.js:16:23) at Promise._settlePromiseFromHandler (D:\hexo\blog\node_modules\bluebird\js\release\promise.js:510:31)

Include rootPath to template string

More: https://github.com/ele828/hexo-prism-plugin/blob/master/index.js#L116

hexo error

INFO Start processing
INFO Files loaded in 671 ms
events.js:160
throw er; // Unhandled 'error' event
^

Error: ENOENT: no such file or directory, open 'E:\blog\HaojunYinGeek.github.io
node_modules\prismjs\themes\prism-realtime.css'
at Error (native)

有计划支持 TSX 么？

在使用插件渲染 tsx 的代码时会出现问题

blinkfox/hexo-theme-matery#304

图解

发生问题的仓库: https://github.com/rxliuli/blog

配置项

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

# 替换 hexo 默认的代码高亮
prism_plugin:
  mode: 'preprocess' # realtime/preprocess
  theme: 'tomorrow'
  line_number: true # default false
  custom_css:

不知道发生了什么，有什么解决方案么？
实测了一下，是因为不支持 tsx 的语法高亮时默认将之当成了普通的 markdown 中的 HTML（默认不应该当作文本么？）

How to add a theme

I want to add a style sheet, I new a css file named "prism-sub-dark.css" and change some colors, and then I changed "_config.yml" like below:

prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'sub-dark'
line_number: false

but it didn't works, if I need change another settings?
Thank you.

配置gfm代码高亮无效

在hexo的_config.yml文件中添加了代码

marked:
   gfm: false

这时候代码高亮就失效了

`prism_plugin` options should be added to _config.yml file

1、I hava a error when I use hexo clean:

err: Error: prism_plugin options should be added to _config.yml file
at \hexo-prism-plugin\src\index.js:70:9
at \hexo\lib\hexo\index.js:315:14
at tryCatcher (\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (\bluebird\js\release\promise.js:547:31)
at Promise._settlePromise (\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (\bluebird\js\release\promise.js:729:18)
at _drainQueueStep (\bluebird\js\release\async.js:93:12)
at _drainQueue (\bluebird\js\release\async.js:86:9)
at Async._drainQueues (\bluebird\js\release\async.js:102:5)
at Immediate.Async.drainQueues [as _onImmediate] (**\bluebird\js\release\async.js:15:14)
at processImmediate (internal/timers.js:456:21)
} Plugin load failed: %s hexo-prism-plugin

2、But,prism_plugin options is added to _config.yml file and my posts is worded:

So, this a bug without detriment to work?

hexo版本为5.2.0的时候，花括号显示为字符串‘&#123;’和‘&#125’

hexo 加载prism出错啦！！！！！

我在我的hexo文件夹下安装了prism插件，但是执行hexo clean和hexo g的时候出现了下面的错误log，这是为什么啊？？
ERROR Plugin load failed: hexo-prism-plugin SyntaxError: missing ) after argument list at Object.exports.runInThisContext (vm.js:53:16) at /Users/turtle/Desktop/imturtle.cn/node_modules/hexo/lib/hexo/index.js:227:17 at tryCatcher (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23) at Promise._settlePromiseFromHandler (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:510:31) at Promise._settlePromise (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:567:18) at Promise._settlePromise0 (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:612:10) at Promise._settlePromises (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:691:18) at Promise._fulfill (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:636:18) at Promise._resolveCallback (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:431:57) at Promise._settlePromiseFromHandler (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:522:17) at Promise._settlePromise (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:567:18) at Promise._settlePromise0 (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:612:10) at Promise._settlePromises (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:691:18) at Promise._fulfill (/Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/promise.js:636:18) at /Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/bluebird/js/release/nodeback.js:42:21 at /Users/turtle/Desktop/imturtle.cn/node_modules/hexo/node_modules/hexo-fs/node_modules/graceful-fs/graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)

Failed to highlight C++ code

inserting cpp source code such like

int function( double x )
{
    return std::floor( x );
}

but unfortunately the output code is not highlighted.

some problem

if i move my blog to subdirectory,this plugin doesn't work anymore.

Lock version of prismjs?

I ran into an issue today with prismjs and eventually tracked it down to their releasing a new 1.7.0 version 3 hours ago. I'm a little confused because I thought that the hexo-prism-plugin had it's dependencies locked. When I npm ls primsjs in my project, it prints this:

└─┬ [email protected]
  └── [email protected] 

How did the prismjs dependency update to 1.7.0?