Org Mode

** H2

*** H3

**** H4

***** H5

****** H6

一篇文章中，通常一级标题只有一个，用来做为当前文章的标题，正文内容层级一般使用二级及其以下层级标题。

分析之后才发现 Hugo 使用的 Org Mode 引擎是没有对 #+BEGIN_HTML ... #+END_HTML 这种原样输出 html 内容的语法做处理的，它会把其内部元素整体做为一个字符串进行输出。好在这个问题很容易处理，我们对它做了一些增强，如下：

$('.html-block p').each((idx, item) => {
	item.innerHTML = `${item.innerText}`
})

思路很简单，我们操作转义后的文本，逆向解析为 html 。如此，我们便可以更加灵活的插入相应的 html 标签了，如我们插入图片。

#+BEGIN_HTML 
<img src="/imgs/bg/cat.jpg" width="400" style="float: ;" />
#+END_HTML

Emphasis, aka underlines, with _asterisks_ or _underscores_.

Emphasis, aka italics, with /asterisks/ or /underscores/.

Strong emphasis, aka bold, with *asterisks* or *underscores*.

Combined emphasis with *asterisks and _underscores_*.

Strikethrough uses two tildes. +Scratch this.+

Emphasis, aka underlines, with asterisks or underscores.

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

1. First ordered list item
2. Another item

-   Unordered sub-list.

1. Actual numbers don't matter, just that it's a number
1. Ordered sub-list


-   Unordered list can use asterisks
+   Or minuses
-   Or pluses
+   Paragraph In unordered list


Common Paragraph with some text.
And more text.

1. First ordered list item
2. Another item

• Unordered sub-list.

1. Actual numbers don't matter, just that it's a number
2. Ordered sub-list

• Unordered list can use asterisks
• Or minuses
• Or pluses
• Paragraph In unordered list

Common Paragraph with some text. And more text.

<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

<dl>
    <dt>Definition list</dt>
    <dd>Is something people use sometimes.</dd>

    <dt>Markdown in HTML</dt>
    <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>

</dl>

[[https://www.google.com][]]
[[https://www.google.com][I'm an inline-style link]]

https://www.google.com

I'm an inline-style link

[[https://hexo.io/icon/favicon-196x196.png][Click to see png]]  ;; 设置图片链接
[[https://hexo.io/icon/favicon-196x196.png]]                    ;; 直接展示图片
[[./imgs/org-mode.png]]                                         ;; 本地图片

hover to see the title text:

Inline-style:

Click to see png

引用本地图片

或者，你可以直接输出 <img> 标签，更方便。

Inline code has equal sign around it. 你可以使用 =inline-code= 来包裹行内代码，也可以使用 ~ ，它们转义后的效果是相同的。

在 Org Mode 中，使用 <s ，按 TAB 展开，很容易得到一组供插入代码块的标签，如下：

#+BEGIN_SRC js
var s = 'JavaScript syntax highlighting';
alert(s);
#+END_SRC

var s = 'JavaScript syntax highlighting';
alert(s);

或者，

s = "Python syntax highlighting"
print s

有时候，我们不指定语言侦测，也可以直接使用 <e 去展开，如下：

#+BEGIN_EXAMPLE 
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
#+END_EXAMPLE

No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

如果，你在 Emacs 中使用的话，可以直接用上述方式展开。如果，你使用 vscode 的话，这里有一个很不错的插件，如下：

| Name        |  Phone | sub1 | sub2 | total |
|-------------+--------+------+------+-------|
| maple       | 134... |   89 |   98 |       |
| wizard      | 152... |   78 |   65 |       |
| Hello World | 123... |   76 |   87 |       |
| hehe        | 157... |   87 |   78 |       |

#+BEGIN_QUOTE 
Blockquotes are very handy in email to emulate reply text.

This line is part of the same quote.
#+END_QUOTE

Blockquotes are very handy in email to emulate reply text.

This line is part of the same quote.

Three or more…

-----

至少 5 个横折线。

在编辑博文的时候，经常想插入一些突然闪现出来的内容，或是于行文无关的吐槽等。为了更好地与正文内容做区分，做了一个定制模式，以 html 格式插入。

#+BEGIN_HTML 
<div class="oh-essay">
这就是我们插入的随笔喽…… blablablabla……
</div>
#+END_HTML

Bilibili 真的很不错，体验上比 Youtube 要好，内容类型嘛，则没有后者丰富，这个没办法，生态大环境决定的。

## Youtube videos

```markdown
<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)

<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)
```