Hexo markdown + bulma css - css

Question

I am building static blog site with Hexo.
Now I want to use Bulma to make design easy.
But I wonder how I can call class name from markdown.
If markdown’s # or ## automatically link to Bulma’s class ‘title’ it would be nice.

Answer 1

I am not sure whether the following answer will work as I haven't tried it. But it will give you a good starting point.
First replace the default markdown renderer engine (marked) with hexo-renderer-markdown-it Link
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
Then add the following in _config.yml
markdown: 'default'
For more infomation on values of markdown refer Simple Configuration page.
We can add more options to the _config.yml file.
All options along with explanations can be found Advanced Configuration page
Example Config
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-attrs
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶
The option which we are interested is the plugin option.
After some research, I found a plugin markdown-it-attrs that can add class attribute as well as other attributes that we normally add, to markdown components
Example input:
# header {.style-me}
paragraph {data-toggle=modal}
Output:
<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
Works with inline elements too:
paragraph *style me*{.red} more text
Output:
<p>paragraph <em class="red">style me</em> more text</p>
More examples on plugin page
Add the plugin name in the plugin section of the _config.yml file