Formatting Styles

Created in March 15, 2015

2015   ·   formatting

more about sidebar

check the bootstrap-toc documentation. Notice that you can even customize the text of the heading that will be displayed on the sidebar.

1. 文本格式

tabs的语法： 
{% tabs 组别名 %}
{% tab 组别名 组别A %}
内容。内容
{% endtab %}
{% tab 组别名 组别B %}
内容，内容
{% endtab %}
{% endtabs %}

  • % Ackermann Procedure
\begin{algorithm}
\caption{Ackermann Function}
\begin{algorithmic}
\PROCEDURE{Ackermann}{$m, n$}
    \IF{$m = 0$}
        \RETURN $n + 1$
    \ELSIF{$m > 0$ AND $n = 0$}
        \RETURN \CALL{Ackermann}{$m - 1, 1$}
    \ELSE
        \RETURN \CALL{Ackermann}{$m - 1, $ \CALL{Ackermann}{$m, n - 1$}}
    \ENDIF
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

  • markdown[Pinterest](https://www.pinterest.com)  
html <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice">cold-pressed</a>
    • Brush Teeth
    • Put on socks
      • Put on left sock
      • Put on right sock
  • > A quote

    > A quote in markdown block

  • - brunch
  - fixie
    - raybans

* sdf
* sdfsdf
* list
  1. sd
  2. sdf

1.  sdf
    a. sdf

  • food:
  - "🥬"
  - "🍉"

  • {
  "relationship": ["tiktok", "ByteDance"]
}

  • {::nomarkdown}



  <div
  class="jupyter-notebook"
  style="position: relative; width: 100%; margin: 0 auto;">
  <div class="jupyter-notebook-iframe-container">
    <iframe
      src="/assets/jupyter/blog.ipynb.html"
      style="position: absolute; top: 0; left: 0; border-style: none;"
      width="100%"
      height="100%"
      onload="this.parentElement.style.paddingBottom = (this.contentWindow.document.documentElement.scrollHeight + 10) + 'px'"></iframe>
  </div>
</div>


{:/nomarkdown}
tabs随记：
  • tabs子标签英文自动大写
  • 使用endtabs作为结束标签
  • 每个tab块都有两个属性（组名和标签名）
  • 有效的标签名
pseudocode随记
  • pseudocode会自动编号，如Algorithm 1, Algorithm 2, …
  • 使用四个反引号（````）来表示代码块是为了嵌套代码块，例：
```pseudocode
% BusyBeaver 函数
\begin{algorithm}
\caption{Busy Beaver Function}
\begin{algorithmic}
\PROCEDURE{BusyBeaver}{$n$}
    \STATE $max\_steps \gets 0$
    \FORALL{图灵机 $T$ with $n$ states}
        \STATE $steps \gets$ \CALL{SimulateTuringMachine}{$T$}
        \IF{$steps > max\_steps$}
            \STATE $max\_steps \gets steps$
        \ENDIF
    \ENDFOR
    \RETURN $max\_steps$
\ENDPROCEDURE

\PROCEDURE{SimulateTuringMachine}{$T$}
    \STATE $current\_state \gets initial\_state$
    \STATE $tape \gets$ an infinite tape initialized to all $0$s
    \STATE $head\_position \gets 0$
    \STATE $steps \gets 0$
    \WHILE{$current\_state$ is not a halting state}
        \STATE $symbol \gets$ symbol at $tape[head\_position]$
        \STATE $action \gets$ action defined by $T$ for $current\_state$ and $symbol$
        \STATE $tape[head\_position] \gets$ action.write
        \STATE $head\_position \gets head\_position + action.move$
        \STATE $current\_state \gets$ action.next\_state
        \STATE $steps \gets steps + 1$
    \ENDWHILE
    \RETURN $steps$
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}
```
code随记：
  • 在liquidtag中代码块显示行数：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
  int main(int argc, char const \*argv[])
  {
  string myString;

      cout << "input a string: ";
      getline(cin, myString);
      int length = myString.length();

      char charArray = new char * [length];

      charArray = myString;
      for(int i = 0; i < length; ++i){
          cout << charArray[i] << " ";
      }

      return 0;

}
  • _config.yml中kramdown.syntax_highlighter_opts.block.line_numbers 可调整
  • 更详细信息见：math和code
html语言

水平线<hr>或者<hr style="border: none; border-top: 2px solid #ccc; width: 50%;">

2.图片

图片
  • thumbnail是“封面图”
  • 2/3,1/3的比例亦可操作
  • Adding data-zoomable to <img> tags so that make images zoomable.
图片显示 一行 三列

Image Swiper 的语法

img-comparison-slider

3.图表

  • ```vega_lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
  },
  "transform": [
    {"filter": "datum['IMDB Rating'] != null"},
    {"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
    {
      "joinaggregate": [{
        "op": "mean",
        "field": "IMDB Rating",
        "as": "AverageRating"
      }]
    },
    {
      "calculate": "datum['IMDB Rating'] - datum.AverageRating",
      "as": "RatingDelta"
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {
      "field": "Release Date",
      "type": "temporal"
    },
    "y": {
      "field": "RatingDelta",
      "type": "quantitative",
      "title": "Rating Delta"
    },
    "color": {
      "field": "RatingDelta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Rating Delta"
    }
  }
}
```

  • ```chartjs
{
  "type": "doughnut",
  "data": {
    "labels": [
      "Red",
      "Blue",
      "Yellow"
    ],
    "datasets": [
      {
        "data": [
          300,
          50,
          100
        ],
        "backgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        "hoverBackgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }
    ]
  },
  "options": {}
}
```

  • ```chartjs
{
  "type": "line",
  "data": {
    "labels": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
    ],
    "datasets": [
      {
        "label": "# of bugs",
        "fill": false,
        "lineTension": 0.1,
        "backgroundColor": "rgba(75,192,192,0.4)",
        "borderColor": "rgba(75,192,192,1)",
        "borderCapStyle": "butt",
        "borderDash": [],
        "borderDashOffset": 0,
        "borderJoinStyle": "miter",
        "pointBorderColor": "rgba(75,192,192,1)",
        "pointBackgroundColor": "#fff",
        "pointBorderWidth": 1,
        "pointHoverRadius": 5,
        "pointHoverBackgroundColor": "rgba(75,192,192,1)",
        "pointHoverBorderColor": "rgba(220,220,220,1)",
        "pointHoverBorderWidth": 2,
        "pointRadius": 1,
        "pointHitRadius": 10,
        "data": [
          65,
          59,
          80,
          81,
          56,
          55,
          40
        ],
        "spanGaps": false
      }
    ]
  },
  "options": {}
}
```

  • ```typograms
+----+
|    |---> My first diagram!
+----+

.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.
```

  • <script type="text/tikz">
  \begin{tikzcd}
    A \arrow[r, "\phi"] \arrow[d, red]
      & B \arrow[d, "\psi" red] \\
    C \arrow[r, red, "\eta" blue]
      & |[blue, rotate=-15]| D
  \end{tikzcd}
</script>

  • ```mermaid
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

vega lite的语法 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
  },
  "transform": [
    {"filter": "datum['IMDB Rating'] != null"},
    {"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
    {
      "joinaggregate": [{
        "op": "mean",
        "field": "IMDB Rating",
        "as": "AverageRating"
      }]
    },
    {
      "calculate": "datum['IMDB Rating'] - datum.AverageRating",
      "as": "RatingDelta"
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {
      "field": "Release Date",
      "type": "temporal"
    },
    "y": {
      "field": "RatingDelta",
      "type": "quantitative",
      "title": "Rating Delta"
    },
    "color": {
      "field": "RatingDelta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Rating Delta"
    }
  }
}

another example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
      "url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/seattle-weather.csv"
  },
  "title": "Daily Max Temperatures (C) in Seattle, WA",
  "config": {
      "view": {
          "strokeWidth": 0,
          "step": 13
      },
      "axis": {
          "domain": false
      }
  },
  "mark": "rect",
  "encoding": {
      "x": {
          "field": "date",
          "timeUnit": "date",
          "type": "ordinal",
          "title": "Day",
          "axis": {
              "labelAngle": 0,
              "format": "%e"
          }
      },
      "y": {
          "field": "date",
          "timeUnit": "month",
          "type": "ordinal",
          "title": "Month"
      },
      "color": {
          "field": "temp_max",
          "aggregate": "max",
          "type": "quantitative",
          "legend": {
              "title": null
          }
      }
  }
}

This plot supports both light and dark themes.

chart.js 的语法 

{
  "type": "line",
  "data": {
    "labels": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
    ],
    "datasets": [
      {
        "label": "# of bugs",
        "fill": false,
        "lineTension": 0.1,
        "backgroundColor": "rgba(75,192,192,0.4)",
        "borderColor": "rgba(75,192,192,1)",
        "borderCapStyle": "butt",
        "borderDash": [],
        "borderDashOffset": 0,
        "borderJoinStyle": "miter",
        "pointBorderColor": "rgba(75,192,192,1)",
        "pointBackgroundColor": "#fff",
        "pointBorderWidth": 1,
        "pointHoverRadius": 5,
        "pointHoverBackgroundColor": "rgba(75,192,192,1)",
        "pointHoverBorderColor": "rgba(220,220,220,1)",
        "pointHoverBorderWidth": 2,
        "pointRadius": 1,
        "pointHitRadius": 10,
        "data": [
          65,
          59,
          80,
          81,
          56,
          55,
          40
        ],
        "spanGaps": false
      }
    ]
  },
  "options": {}
}

Also another example chart.

{
  "type": "doughnut",
  "data": {
    "labels": [
      "Red",
      "Blue",
      "Yellow"
    ],
    "datasets": [
      {
        "data": [
          300,
          50,
          100
        ],
        "backgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        "hoverBackgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }
    ]
  },
  "options": {}
}

echarts的语法 

```echarts
{
  "title": {
    "text": "ECharts Getting Started Example"
  },
  "responsive": true,
  "tooltip": {},
  "legend": {
    "top": "30px",
    "data": ["sales"]
  },
  "xAxis": {
    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
  },
  "yAxis": {},
  "series": [
    {
      "name": "sales",
      "type": "bar",
      "data": [5, 20, 36, 10, 10, 20]
    }
  ]
}
```

Which generates:

{
  "title": {
    "text": "ECharts Getting Started Example"
  },
  "responsive": true,
  "tooltip": {},
  "legend": {
    "top": "30px",
    "data": ["sales"]
  },
  "xAxis": {
    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
  },
  "yAxis": {},
  "series": [
    {
      "name": "sales",
      "type": "bar",
      "data": [5, 20, 36, 10, 10, 20]
    }
  ]
}

Note that this library offer support for both light and dark themes.

typograms的语法 

+----+
|    |---> My first diagram!
+----+

.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.

TikZJax的语法

Mermaid的语法 

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

4.表格的语法

Simple Example

First, add the following to the post’s front matter

Then, the following syntax

| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1       |    center 1    |       right 1 |
| Left 2       |    center 2    |       right 2 |
| Left 3       |    center 3    |       right 3 |

will generate

Left aligned Center aligned Right aligned
Left 1 center 1 right 1
Left 2 center 2 right 2
Left 3 center 3 right 3

HTML Example

It is also possible to use HTML to display tables. For example, the following HTML code will display a table with Bootstrap Table, loaded from a JSON file:

<table id="table" data-toggle="table" data-url="{{ '/assets/json/table_data.json' | relative_url }}">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>
ID Item Name Item Price

More Complex Example

By using Bootstrap Table it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the documentation.

<table
  data-click-to-select="true"
  data-height="460"
  data-pagination="true"
  data-search="true"
  data-toggle="table"
  data-url="{{ '/assets/json/table_data.json' | relative_url }}"
>
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
      <th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
      <th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>
ID Item Name Item Price

5. 音视频的语法

A simple, elegant caption looks good between video rows, after each row, or doesn't have to be there at all.
A simple, elegant caption looks good between video rows, after each row, or doesn't have to be there at all.

It does also support embedding videos from different sources. Here are some examples:

6. 其他特殊格式：

jupyter nb的语法

【暂略】

redirect链接

adding the following to the post’s front matter

---
layout: post
redirect: /assets/pdf/example_pdf.pdf
---

Blockquote的语法

This post shows how to add custom styles for blockquotes. Based on jekyll-gitbook implementation.

We decided to support the same custom blockquotes as in jekyll-gitbook, which are also found in a lot of other sites’ styles. The styles definitions can be found on the _base.scss file, more specifically:

/* Tips, warnings, and dangers */
.post .post-content blockquote {
  &.block-tip {
    border-color: var(--global-tip-block);
    background-color: var(--global-tip-block-bg);

    p {
      color: var(--global-tip-block-text);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--global-tip-block-title);
    }
  }

  &.block-warning {
    border-color: var(--global-warning-block);
    background-color: var(--global-warning-block-bg);

    p {
      color: var(--global-warning-block-text);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--global-warning-block-title);
    }
  }

  &.block-danger {
    border-color: var(--global-danger-block);
    background-color: var(--global-danger-block-bg);

    p {
      color: var(--global-danger-block-text);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--global-danger-block-title);
    }
  }
}

A regular blockquote can be used as following:

> This is a regular blockquote
> and it can be used as usual

This is a regular blockquote and it can be used as usual

These custom styles can be used by adding the specific class to the blockquote, as follows:

> ##### TIP
>
> A tip can be used when you want to give advice
> related to a certain content.
{: .block-tip }
TIP

A tip can be used when you want to give advice related to a certain content.

> ##### 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

> ##### DANGER
>
> This is a danger zone, and thus should
> be used carefully
{: .block-danger }
DANGER

This is a danger zone, and thus should be used carefully

geojson的语法 

```geojson
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              -60.11363029935569,
              -2.904625022183211
            ],
            [
              -60.11363029935569,
              -3.162613728707967
            ],
            [
              -59.820894493858034,
              -3.162613728707967
            ],
            [
              -59.820894493858034,
              -2.904625022183211
            ],
            [
              -60.11363029935569,
              -2.904625022183211
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}
```

Which generates:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              -60.11363029935569,
              -2.904625022183211
            ],
            [
              -60.11363029935569,
              -3.162613728707967
            ],
            [
              -59.820894493858034,
              -3.162613728707967
            ],
            [
              -59.820894493858034,
              -2.904625022183211
            ],
            [
              -60.11363029935569,
              -2.904625022183211
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

code diff 语法

【暂略】

twitter语法

【暂略】



If you found this useful, please cite this as:

Wang, Yiming (Mar 2015). Formatting Styles. https://betagi.github.io.

or as a BibTeX entry:

@article{wang2015formatting-styles,
  title   = {Formatting Styles},
  author  = {Wang, Yiming},
  year    = {2015},
  month   = {Mar},
  url     = {https://betagi.github.io/blog/2015/formatting/}
}