Org to Site

Table of Contents

这是测试 Org Mode 输出 .html 时调试样式用的文件,略作调整,作为样式展示页。

https://orgmode.org/org.html#Include-Files

标题测试

* First Level 一级标题
** Second Level 二级标题
*** Third Level 三级标题
**** Forth Level 四级标题
***** Fifth Level 五级标题
****** Sixth Level 六级标题

具体生成效果,见该页即可,为了方便识别标题层级,做了样式处理(颜色、前缀等)。

段落

A single newline has no effect.
This line is part of the same paragraph.

But an empty line

demaracates paragraphs.   

A single newline has no effect.This line is part of the same paragraph.

But an empty line

demaracates paragraphs.   

如果,你不想新起一个段落,可以使用 \\ 强制换行,如下:

A single newline has no effect.\\
This line is part of the same paragraph.

A single newline has no effect.This line is part of the same paragraph.

引用

这是一段引用的文字。

再看一段引用较长的文字。

横空出世,莽昆仑,阅尽人间春色。飞起玉龙三百万,搅得周天寒彻。夏日消溶,江河横溢,人或为鱼鳖。千秋功罪,谁人曾与评说?

而今我谓昆仑,不要这高,不要这多雪。安得倚天抽宝剑,把汝裁为三截?一截遗欧,一截赠美,一截还东国。太平世界,环球同此凉热。

– 近现代·毛泽东《念奴娇·昆仑》

行内格式

Src Code Out Style
_underline_ underline
+strike through+ strike through
*BOLD* BOLD
/italic/ italic
=code= code
~verbatim~ verbatim
super^{script} → a3
sub_{script} → H2O

上表为 .org 文件行内格式的输出效果,另外,也对表格样式做了处理。

表格

Simple Table

| Cell in column 1, row 1 | Cell in column 2, row 1 |
| Cell in column 1, row 2 | Cell in column 2, row 2 |

Cell in column 1, row 1 Cell in column 2, row 1
Cell in column 1, row 2 Cell in column 2, row 2

Table with Aligned Cells

#+CAPTION: Table with aligned columns
|          <r> | <c>          | <l>          |
|            1 | 2            | 3            |
|        Right | Center       | Left         |
| xxxxxxxxxxxx | xxxxxxxxxxxx | xxxxxxxxxxxx |

Table 1: Table with aligned columns
1 2 3
Right Center Left
xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx

Header Row

#+CAPTION: Table with an header row
| Name of column 1 | Name of column 2 | Name of column 3 |
|------------------+------------------+------------------|
| Top left         | Top middle       |                  |
|                  |                  | Right            |
| Bottom left      | Bottom middle    |                  |

Table 2: Table with an header row
Name of column 1 Name of column 2 Name of column 3
Top left Top middle  
    Right
Bottom left Bottom middle  

列表1

无序列表

Unordered list:
- The first item
- The second item
  + The second-1 child item
  + The second-2 child item

Unordered list:

  • The first item
  • The second item
    • The second-1 child item
    • The second-2 child item

有序列表

Ordered list:
1. The first item
2. The second item
  1) The second-1 child item
  2) The second-2 child item

Ordered list:

  1. The first item
  2. The second item
    1. The second-1 child item
    2. The second-2 child item

复选列表

Checklist:
- [X] Checked.
- [ ] Half-checked.
- [ ] Not checked.
- Normal list item.

Checklist:

  • [X] Checked.
  • [ ] Half-checked.
  • [ ] Not checked.
  • Normal list item.

代码块

Highlight.js 无法实现 Org Mode 代码块的高亮,原因如下:

  • Org Mode 输出时 org-html-htmlize-output-type 变量的值默认是 inline-css ,会导致生成的 html 文件中,代码块包含内部样式;
  • Highlight.js 默认自动检测的标签是 <pre><code> ,Org Mode 输出的 html 文件,代码块只有外部标签 <pre>
  • 另外,如果同时输出代码行号的话,代码就会被包裹在 <span> 中,也是没有办法侦测的。

目前,尚不明确 Highligh.js 是否支持 <pre> 内的递归侦测….

Example Block

let author = 'Jack';

function greet(name) {
    console.log('Hello ' + name);
}

greet(author);

Source Code Block

对代码过长溢出界面的情况,我们做了特殊处理,PC 端时,只有光标移到代码块上方的时候才会显示滚动条。

JavaScript code.

// 这是一段长注释,用来检验代码长度溢出的情况。 It's a longer comment of code, which is for testing code block showwing.
let author = 'Jack';

function greet(name) {
    console.log('Hello ' + name);
}

greet(author);

Code with line number.

1: let author = 'Jack';
2: 
3: function greet(name) {
4:     console.log('Hello ' + name);
5: }
6: 
7: greet(author);

Java code.

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World.");
    }
}

图片

Common images.

bg.jpg

像上面这样输出的图片,没有办法控制图片大小,确切地说, Windows 上没有办法控制。可以通过直接插入 img 标签来控制。注意,默认情况下, Org Mode 输出 .html 文件时候会对 html 标签转义,故需要把它原样输出。如下:

Quoting Html Tags

#+BEGIN_EXPORT html
  # All lines between these markers are exported literally
  <img src="/images/bg.jpg" width="80%" />
#+END_EXPORT

看,我们生成一个宽度为 80% 的图片。

和表格一样,我们来看一个带标题的图片。

bg.jpg

Figure 2: Magic Emacs

待办事项 [1/3]

主要是为了 Org Mode 做日程管理时用,高亮 TODO 关键字。

TODO [A] 待办事项   标签 work @tag

对任务加优先级,来管理待办事件优先程度。

PROJECT 待办事项列表

  • State "PROJECT" from "REFER" [2019-12-29 Sun 15:32]
  • State "REFER" from "TODO" [2019-12-29 Sun 15:20]

待办事宜如下:

  • [X] 第一条待办事项
  • [ ] 第二条待办事项

DONE 已办列表

  • State "DONE" from "TODO" [2019-12-29 Sun 15:19]

上述显示的时间列表是自动生成的,需要对 Emacs 进行配置,如果你不知道,说明不需要,不用在意。

页脚参考链接2

页脚参考链接,通常是引用内容的地址链接,当然,也可以作为文本词条的附加说明。

Footnotes:

2

页面内容文本词条的附加说明。

Date: 2019-12-26 Thu 18:14

Author: Jack Liu

Created: 2020-02-08 Sat 21:26

Validate