GithubHelp home page GithubHelp logo

hexo-tag-vimhighlight's Introduction

Introduction

This is a hexo tag plugin which allows you to use vim syntax highlight to highlight code inside markdown.

Why?

Hexo is a static blogging system written in Node.js, it uses highlight.js by default to render code.

However, lots of languages are not supported by highlight.js, but always supported by vim with proper plugins. Moreover, vim usually supports more features than highlight.js, even for common languages. See the demo below (left: vimhighlight; right: highlight.js).

demo

From the image above, we see that highlight.js cannot recognize C++ keywords "struct", "static"; it also fails to recognize STL functions "forward" and "get". All of these can be handled correctly by vim.

See this page for more samples. Note that the actual appearance depends on how you config your vim.

Installation

You need to have vim properly installed and configured, since this program will directly run vim.

To install, run the following command in the root directory of hexo:

npm install hexo-tag-vimhighlight --save

Usage

Specify the code filetype, and whether to show line number, in the common format of tag plugins:

{% vimhl cpp true %}
template <unsigned K, class RET, class F, class Tup>
struct Expander {
  template <class... Ts>
  static RET expand(F&& func, Tup&& t, Ts && ... args) {
    return Expander<K - 1, RET, F, Tup>::expand (
        forward<F>(func),
        forward<Tup>(t),
        get<K - 1>(forward<Tup>(t)),
        forward<Ts>(args)...
    );}
};
{% endvimhl %}

By default, line number will not be displayed, you can use {% vimhl cpp %} for short.

Speed

This plugin calls vim to highlight code, so site-generation may be slow sometimes. The following mechanism are used to speed up rendering:

  • The highlighted code will be cached in your_hexo_root/cache/vimHighlight so that only the first-time rendering will execute vim. Note that this implies you'll need to remove the cache folder manually if you changed vim colorscheme.

To further speed up the first-time rendering:

  • This plugin uses async hexo tag. This means the vimhl tags between different posts will render concurrently.
  • This hexo patch further enables concurrent rendering of tags within one post. If you have a single post with many vimhl tags, this patch can improve the first-time rendering.

hexo-tag-vimhighlight's People

Contributors

nxfifteen avatar ppwwyyxx avatar tokoro10g avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

hexo-tag-vimhighlight's Issues

[error] Plugin load failed: hexo-tag-vimhighlight

plugin cannot be loaded.
Error: Unknown logic tag at line 29: "vimhl".
at Object.exports.parse (/usr/local/lib/node_modules/hexo/node_modules/swig/lib/parser.js:264:15)
at createTemplate (/usr/local/lib/node_modules/hexo/node_modules/swig/lib/swig.js:84:29)
at getTemplate (/usr/local/lib/node_modules/hexo/node_modules/swig/lib/swig.js:124:20)
at Object.exports.compile (/usr/local/lib/node_modules/hexo/node_modules/swig/lib/swig.js:186:14)
at /usr/local/lib/node_modules/hexo/lib/post/render.js:60:29
at /usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:548:21
at /usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:224:13
at iterate (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:131:13)
at async.eachSeries (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:147:9)
at _asyncMap (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:223:9)

Cann't input {% vimhl lang %} as normal text

can not input {% vimhl lang %} as normal text

have to use
{% vimhl lang %} 和后缀{% endvimhl %}
instead, while this would be rendered as
{% vimhl lang %} 和后缀{% endvimhl %}

Cannot find module './vimhl'

After upgrade to 0.1.6:

[error] HexoError: Plugin load failed: hexo-tag-vimhighlight
Error: Cannot find module './vimhl'

That's because of the absence of 'vimhl.js' ?!

请问要让c++代码高亮,是这样做吗??

我把这段代码放到我博客上,却发现没有跟你博客里面那样,
{% vimhl cpp true %}
template
tuple<T, T> sort(T a, T b) {
return a < b ? std::make_tuple(a, b) : std::make_tuple(b, a);
{% endvimhl %}

这插件安装成功的,因为你那段实例vim的代码,就能正常高亮

ERROR Plugin load failed: hexo-tag-vimhighlight

After hexo ungraded to 3.0.0

hexo-tag-vimhighlight could not be loaded.

ERROR Plugin load failed: hexo-tag-vimhighlight
Error: Cannot find module './build/Release/shell'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/daxiawj/Workspace/newhexo/node_modules/hexo-tag-vimhighlight/node_modules/execSync/index.js:30:11)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/daxiawj/Workspace/newhexo/node_modules/hexo-tag-vimhighlight/vimhl.js:5:14)
    at Object.<anonymous> (/Users/daxiawj/Workspace/newhexo/node_modules/hexo-tag-vimhighlight/vimhl.js:52:4)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/lib/hexo/index.js:213:21)
    at /Users/daxiawj/Workspace/newhexo/node_modules/hexo-tag-vimhighlight/index.js:1:85
    at /Users/daxiawj/Workspace/newhexo/node_modules/hexo/lib/hexo/index.js:229:12
    at tryCatcher (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/util.js:24:31)
    at Promise._settlePromiseFromHandler (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/promise.js:454:31)
    at Promise._settlePromiseAt (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/promise.js:530:18)
    at Promise._settlePromises (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/promise.js:646:14)
    at Async._drainQueue (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/async.js:79:16)
    at Async._drainQueues (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/async.js:89:10)
    at Async.drainQueues (/Users/daxiawj/Workspace/newhexo/node_modules/hexo/node_modules/bluebird/js/main/async.js:14:14)
    at process._tickCallback (node.js:355:11)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.