[Tips] About Blog

Posted on |

Some tips written down when I am blogging using Hexo, theme Next.

Markdown

Syntax highlighting in markdown

Custom Font

1
2
3
4
<font size=4 color="#ccc"> custom font </font>
<font color="red">★</font>
--- <!-- dash line -->
custom font
★

Mathjax

Enable Mathjax

in Next theme’s _config.yml. 

1
2
3
4
# MathJax Support
mathjax:
  enable: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

Reference

  1. MathJax basic tutorial and quick reference
  2. Easy Copy MathJax

Tricks

  • \ and _ are conflict with markdown. Use \\ and __ when some bugs occur. For example, use $\\{x\\}$ to display $\{x\}$ instead of $\{x\}$.

    1
    2
    3
    4
    5
    6
    $cdf\_x(i) = \\sum\_{j=0}^i p\_x(j)$ <!-- Right -->
    $ cdf_x(i) = \sum_{j=0}^i p_x(j) $   <!-- Wrong -->
    $ cdf_x(i)$ <!-- However the left half alone is right  -->
    $\sum_{j=0}^i p_x(j)$ <!-- And the right half alone is right too -->

    $cdf_x(i) = \sum_{j=0}^i p_x(j)$
    $ cdfx(i) = \sum{j=0}^i p_x(j) $

    $ cdf_x(i)$

    $\sum_{j=0}^i p_x(j)$

  • Use \cr or \\\\ instead of \\ in matrix for new line

    1
    $\begin{bmatrix}A && B \cr C && D \end{bmatrix}$

    $\begin{bmatrix}A && B \cr C && D \end{bmatrix}$

  • Two ways for display mode

    1
    2
    3
    4
    5
    6
    7
    $$ <!-- This way(with newline) fails sometimes! -->
    p_x(i)=p(x=i)=\frac {n_i}{n}, \quad 0 \leq i<L 
    $$
    <!-- new line -->
    $$ p_x(i)=p(x=i)=\frac {n_i}{n}, \quad 0 \leq i<L $$
    <!-- new line -->

Picture Usage

Multiple image arrangement

This method arrange multiple pictures easily without manually resize images. The images display without the original setting in Hexo or Next for images. For example, they don’t have border and are unclickable.
First uncomment two lines in themes\next\source\css\_common\components\tags\group-pictures.styl to make picture normally arrange in posts besides index page.

1
2
3
4
5
6
.page-post-detail .post-body .group-picture-column {
  // float: none;
  margin-top: 10px;
  // width: auto !important;
  img { margin: 0 auto; }
}

Then use {\% gp x-y \%} ![alt](path) {\% endgp \%} directly(no need to add type: "picture in my case!).
x-y: x represents images number and y represents the arrangement style. 

1
2
3
4
5
6
7
8
9
10
11
* 2-1 * 2-2 * 3-1   * 3-2 * 3-3 *    
*  □  * □ □ * □ □ □ *  □  * □ □ *    
*  □  *     *       * □ □ *  □  *   
* 4-1 *  4-2  * 4-3  *  4-4  * 4-3 *    
*  □  *   □   * □ □  * □ □ □ * □ □ *    
* □ □ * □ □ □ * □ □  *   □   *  □  *    
*  □  * 
* 5-1 * 5-2 *  5-3  *  5-4   *  6
*  □  * □ □ *  □ □  * □ □ □  * □ □ □
* □ □ *  □  * □ □ □ *  □ □   * □ □ □
* □ □ * □ □ *       *        *

For more arrangement(x=6~10), look up in theme/next/scripts/tags/group-pictures.js
There’s a trick I found. If I want to align three images in a row I have to use 4-4 instead of 3-1. 

1
2
3
4
5
{% gp 4-4 %}
![](/images/cvpr/10_source.bmp)
![](/images/cvpr/10_result.bmp)
![](/images/cvpr/10_target.bmp)
{% endgp %}

Reference: here

Single image with title

1
2
3
4
<img
src="/images/cvpr/10_source.bmp" 
title="Road in Yunnan, China, credit: HYPJUDY"
style="width: 50%; margin: auto;">

Road in Yunnan, China

The following way can work in GitHub:

1
<img src="/images/cvpr/10_source.bmp" width="45%" />

ImageMagick

Use ImageMagick® to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG. Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

Directly process in cmd.

1
2
3
> cd directory\path\to\your\images
> magick imageName.jpg -resize 50% imageName2.bmp
> magick *.jpg %d.bmp

The last line converts all jpg images to bmp format and name then from 0.bmp to n.bmp.