Tips to write blog .md

Introduction

This blog post highlights the key features of to write the posts markdwon.

Tips

Tabs for something else

! You should have tabs: true in the YAML front matter.

Regular text
A quote
Hipster list
- brunch
- fixie
- raybans
- messenger bag

post with citation

If you place citation: true in the YAML front matter, it displays the citation reference in the below of the post.

Image with fancy options

You can check the forms in the Advanced Image.

You should place the key options in the YAML front matter, too!

images:
  compare: true
  slider: true

w jupyter notebook

There exits a Jekyll Jupyter Notebook plugin.
It convets the jupyter notebook to html site.
Since Kramdown automatically renders the jekyll’s markdown, we should use the ::nomarkdown tag to process the following text without Kramdown.

{::nomarkdown}
{% assign jupyter_path = "assets/jupyter/blog.ipynb" | relative_url %}
{% capture notebook_exists %}{% file_exists assets/jupyter/blog.ipynb %}{% endcapture %}
{% if notebook_exists == "true" %}
{% jupyter_notebook jupyter_path %}
{% else %}

<p>Sorry, the notebook you are looking for does not exist.</p>
{% endif %}
{:/nomarkdown}

No front matter is needed, only the nomarkdwon tag!
You can see the randering results in a post with jupyter notebook

Custom blockquotes

You can use pre-defined scss for the quote block.

The examples are below.

> ##### WARNING
>
> This is a warning, and thus should
> be used when you want to warn the user
{: .block-warning }

WARNING

This is a warning, and thus should be used when you want to warn the user

The {: .block-warning } makes the former quote block changed to the additional scss.

More options : {: .block-tip }, {: .block-danger }

Post with table of contents

YAML front matter

toc:
  sidebar: left

More customization of toc can be learned through bootstrap-toc.

Redirct post

redirect: /assets/pdf/example_pdf.pdf

It directly redirct to the file.
Example page in a post with redirect

Math post

You can use expression with $$.
You should follow the grammar of MathJax 3 engine.

$$
\sum_{k=1}^\infty |\langle x, e_k \rangle|^2 \leq \|x\|^2
$$

\[\sum_{k=1}^\infty |\langle x, e_k \rangle|^2 \leq \|x\|^2\]

Code post

Basically you can write code with \`` c++`.
As the number of line is false for default. You can use below argument.


{% highlight c++ linenos %}
{% endhighlihgt %}

Zoomable-image

thumbnail: assets/img/9.jpg

Using the thumbnail yml, you can display the image in the home.

To use the zoomable=true see the full source code in a post with images source code.

Basic formatting

Check List

You can simple apply check list with md, but i don’t i will use it frequently…😕

#### Check List

- [x] Brush Teeth
- [ ] Put on socks
  - [x] Put on left sock
  - [ ] Put on right sock
- [x] Go to school

Other options

pseudocode: true
chart:
  vega_lite: true
  echarts: true
  chartjs: true
code_diff: true
map: true                   # geojson
pretty_table: true          # bootstrap table
toc:
  beginning: true
giscus_comments: true
mermaid:                    # diagram JS
  enabled: true
  zoomable: true
layout : distill            # distill form layout : check for further usage
featured : true             # pinned in the blog home