Test image asset

Hexo figure problem

I am try to use typora, github.io and hexo to build my blog. However, I encounter that the image import problem.

The problem is caused by the different image loading rules for hexo and typora. After searching some resolutions in Google, I find that this could help me resolve this problem.

First is to change the _config.yml doc

post_asset_folder: true
marked:
    prependRoot: true
    postAsset: true

Second step is to install a plugins for image loading

npm install hexo-renderer-marked --save

Now, the new created post in hexo could generate $filename fold automatically, and the image upload will be resolved automatically with your\storage\post\$filename_fold\${*.jpg} so that the filepath you could regularly see is filepath\*.jpg. However, this filepath still could not been seen in typora.

Then, set the typora. preference of image to Copy image to custom folder, which is ./${filename} , Apply above rules to local images, Use relative path if possable and add ./ to relative path

And the last step is to add code in node_modules\hexo-renderer-marked\lib\renderer.js . Find the image render and add code

// Prepend root to image path
image(href, title, text) {
  const { hexo, options } = this;
  if (href.indexOf('/')>-1){
    href = href.split('/')[1];
  }
    ...

Now the image is regularly showed!
😙

Hexo & matery math equation problem

May be you think that if the problem about rendering figure is solved and the equation should not be a case. But I encounter about the rendering figure of math equation are not accountable with my theme and configuration. So that, I believe that I should tey to use Hexo plugins to solve it.

The first step is to install the math avaible plugin npm install hexo-math --save, and configure your _config.yml, add following code

math:
  engine: 'mathjax'
  mathjax:
    src: custom_mathjax_source
    config:
      # MathJax config

And then open the file your/theme/path/_config.yml and set

mathjax:
  enable: true
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

Change the default rendering engine of Hexo, because the hexo-renderer-marked would reder _ between $$$$ as <i>in HTML. So that

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

After that, follow tha instruction in README.md of hexo-render-kramed, add following code in _config.yml.

kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

Now, in your bolg, the \$\$ something inside \$\$ would appear normally as your math equation.