doom org style

样式引用：https://docs.doomemacs.org/latest/#/modules

一个类 doom doc 的 org html 样式模版点此预览🪄

1 使用

配置 snippet 模版，然后在 org mode 文件中使用 tt tab 就可展开此模版。

#+HTML_HEAD: <script src  = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
#+HTML_HEAD: <script src  = "https://emacs-1308440781.cos.ap-chengdu.myqcloud.com/scroll.js"></script>
#+HTML_HEAD: <link   href = "https://emacs-1308440781.cos.ap-chengdu.myqcloud.com/base.css" rel="stylesheet" type="text/css"></link>
#+OPTIONS: prop:nil timestamp:t \n:t ^:nil f:t toc:t author:t num:t H:2
#+LATEX_COMPILER: xelatex
#+LATEX_CLASS: elegantpaper
#+latex:\newpage

#+HTML_HEAD: <link href="https://emacs-1308440781.cos.ap-chengdu.myqcloud.com/org_css.css" rel="stylesheet"></link>
#+HTML_HEAD: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
#+HTML_HEAD: <script src="https://emacs-1308440781.cos.ap-chengdu.myqcloud.com/scroll.js"></script>

2 字体样式

粗体	bold
斜体	italic
下划线	underlined
中横线	~~strike-through~~
代码，按键	`code`

3 特殊说明

3.1 quote 摘要、引用

可使用`quote`来进行代码块补全，表示摘要，引用

TECO - Tape [later text] Editor/COrrector A combination text editor/really horrible ProgrammingLanguage. To quote the paper “RealProgrammers don’t use Pascal” (1983):

3.2 notice 注意事项、提醒

3.3 Declare a reference

According to the documentation Internal-Links we know there have two ways to sign a particular tag.

the outline of org mode is an natural linkable tag.
use <<a particular tag>> to declare a linkable tag.

4 段落及高亮

Example of an @@comment:inline@@ comment.

原文：用友 bip 产品功能说明，在说明文档

大数据中 最宝贵 、最难以代替的就是数据，一切都围绕数据。

HDFS 是最早的大数据存储系统，存储着宝贵的数据资产，各种新算法、框架要想得到广泛使用，必须支持 HDFS，才能获取已存储在里面的数据。所以大数据技术越发展，新技术越多，HDFS 得到的支持越多，越离不开 HDFS。HDFS 也许不是最好的大数据存储技术，但依然是最重要的大数据存储技术。

HDFS 是如何实现大数据高速、可靠的存储和访问的呢？

Hadoop 分布式文件系统 HDFS 的设计目标是管理数以千计的服务器、数以万计的磁盘，将大规模的服务器计算资源当作一个单一存储系统进行管理，对应用程序提供数以 PB 计的存储容量，让应用程序像使用普通文件系统一样存储大规模的文件数据。

5 表格

C-c ~ to convert to tabel.el table C-c ~ to convert to org table org table M-h M-l for move Columns left and right org table M-k M-j for move Rows up and down

# table.el for merge Columns or Rows

#+CAPTION[Short caption]: square

N	N^2	N^3	N^4	sqrt(n)	sqrt[4](N)
/	<		>	<	>
1	1	1	1	1	1
2	4	8	16	1.4142136	1.1892071
3	9	27	81	1.7320508	1.3160740

	Student	Prob 1	Prob 2	Prob 3	Total	Note
!		P1	P2	P3	Tot
#	Maximum	10	15	25	50	10.0
^		m1	m2	m3	mt
#	Peter	10	8	23	41	8.2
#	Sam	2	4	3	9	1.8
	Average				25.0
^					at
$	max=50

Format	Fine-grained-control	Initial Effort	Syntax simplicity	Editor Support	Integrations	Ease-of-referencing	Versatility
Word	Word^2	Word^3	Word^4	sqrt(Word)	sqrt(sqrt(Word))	2	2
LaTeX	LaTeX^2	LaTeX^3	LaTeX^4	sqrt(LaTeX)	sqrt(sqrt(LaTeX))	4	3
Org Mode	Org^2 Mode^2	Org^3 Mode^3	Org^4 Mode^4	sqrt(Org Mode)	sqrt(sqrt(Org Mode))	4	4
Markdown	Markdown^2	Markdown^3	Markdown^4	sqrt(Markdown)	sqrt(sqrt(Markdown))	3	1
Markdown + Pandoc	(Markdown + Pandoc)^2	(Markdown + Pandoc)^3	(Markdown + Pandoc)^4	sqrt(Markdown + Pandoc)	sqrt(sqrt(Markdown + Pandoc))	3	2

5.1 AWK 表格

aardvark	555-5553	1200/300	B
alpo-net	555-3412	2400/1200/300	A
barfly	555-7685	1200/300	A
bites	555-1675	2400/1200/300	A
camelot	555-0542	300	C
core	555-2912	1200/300	C
fooey	555-1234	2400/1200/300	B
foot	555-6699	1200/300	B
macfoo	555-6480	1200/300	A
sdace	555-3430	2400/1200/300	A
sabafoo	555-2127	1200/300	C

/foo/ { print $0 }

fooey	555-1234	2400/1200/300	B
foot	555-6699	1200/300	B
macfoo	555-6480	1200/300	A
sabafoo	555-2127	1200/300	C

5.2 表格自增 ID

The target scope which at the left of equation , @ means row number and $ means column nubmer of increasing from one. The expression which at the right of equation , @# stands for the row number of increasing from zero.

序号	字段名	名称
1	age	年龄
2	bir	出生年月日

#+tblfm: $1=@#-1

C-c C-c to execute it

6 LaTex 公式

$$\begin{aligned} cos 3θ & = cos (2 θ + θ) & = cos 2 θ cos θ - sin 2 θ sin θ \\ & = (2 cos ^2 θ -1) cos θ - (2 sin θ\cos θ ) sin θ \\ & = 2 cos ^3 θ - cos θ - 2 sin ^2 θ cos θ \\ & = 2 cos ^3 θ - cos θ - 2 (1 - cos ^2 θ )cos θ \\ & = 4 cos ^3 θ -3 cos θ \end{aligned} $$

7 Org 代码

代码片段开启行号，修改 `~/.emacs.d/.local/straight/repos/org/lisp/ox-html.el`

(let* ((code-lines (split-string code "\n"))
	 (code-length (length code-lines))
	 (num-fmt
	  (and num-start
	       (format "%%%ds "
	       (format "%(add-hook 'code-review-mode-hook
        (lambda ()
          ;; include *Code-Review* buffer into current workspace
          (persp-add-buffer (current-buffer))))%%ds: "

7.1 Java 代码

/**
 * @param request 调用的请求参数
 * @param needLog true 需要记录日志  false 不记录日志
 * @return
 */
protected NcApiResponse runApply(NcApiRequest request, Boolean needLog) {
    NcApiResponse ncApiResponse = null;
    try {
        final NcApiRequest ncApiRequest = executeBefore(request);
        ncApiResponse = executeGetRequest(ncApiRequest);
    } catch (Exception e) {
        afterExecute(needLog, e, request, ncApiResponse);
        if (e instanceof BizException) {
            throw new BizException("NC 提示", ((BizException) e).getErrorMsg(), e);
        } else {
            throw new BizException("NC 异常", e.getMessage());
        }
    }

    return ncApiResponse;
}

7.2 babel java

List<Integer> a = Arrays.asList(1, 2);
return a;

C-c C-c to execute it, but export to html will fail when the babel java result generated.

8 图片

8.1 引用本地图片

#+CAPTION[Short caption]: create by https://excalidraw.com/

8.2 dot

digraph G {
    node [shape="box",fontcolor="#4EAEEF"]
    edge [color="#a69fe0" fontcolor=white]
    bgcolor="transparent"
    rankdir = TD
    compound=true

    subgraph clusterD {
        fontcolor=white
        label = "Local";
        SlaughterServerB -> LocalDBB [splines=ortho]
        SlaughterServerB -> SlaughterClientB [minlen=1]
        {rank=same;  SlaughterServerB , LocalDBB }
    }

    subgraph clusterM {
        node [shape="box",fontcolor="#c475db"]
        fontcolor=white
        label = "Local";
        SlaughterServerA -> LocalDBA [splines=ortho ]
        SlaughterServerA -> SlaughterClientA [minlen=1]
        {rank=same;  SlaughterServerA , LocalDBA }
    }
    EBS -> SlaughterServerA [dir=both minlen=2 label="ϟ" lhead="clusterM"][constraint=true];
    EBS -> SlaughterServerB [dir=both,minlen=2,label="ϟ" lhead="clusterD" color="#a69fe0:#c475db"]


}

8.3 dot sk

digraph G {
    node [shape="box",fontcolor="#4EAEEF"]
    edge [color="#a69fe0" fontcolor=white]
    bgcolor="transparent"
    rankdir = TD
    compound=true

    subgraph clusterD {
        fontcolor=white
        label = "Local";
        SlaughterServerB -> LocalDBB [splines=ortho]
        SlaughterServerB -> SlaughterClientB [minlen=1]
        {rank=same;  SlaughterServerB , LocalDBB }
    }

    subgraph clusterM {
        node [shape="box",fontcolor="#c475db"]
        fontcolor=white
        label = "Local";
        SlaughterServerA -> LocalDBA [splines=ortho ]
        SlaughterServerA -> SlaughterClientA [minlen=1]
        {rank=same;  SlaughterServerA , LocalDBA }
    }
    EBS -> SlaughterServerA [dir=both minlen=2 label="ϟ" lhead="clusterM"][constraint=true];
    EBS -> SlaughterServerB [dir=both,minlen=2,label="ϟ" lhead="clusterD" color="#a69fe0:#c475db"]
}

8.4 plantuml with style css

plantuml 替换原生样式 DARKO RANGE/LIGHTORANGE/DARKBLUE/LIGHTBLUE/DARKRED/LIGHTRED/DARKGREEN/LIGHTGREEN

!define LIGHTORANGE
!includeurl C4-PlantUML/juststyle.puml

!define LIGHTORANGE
!includeurl C4-PlantUML/juststyle.puml
skinparam backgroundColor transparent

activate SharePoint
SharePoint -> DeploymentService: << AppInstalling >>
activate DeploymentService
SharePoint <-- DeploymentService: received & starting
SharePoint -> SharePoint: << AppInstallPending >>

DeploymentService -> ArtifactRepo: obtain artifacts
activate ArtifactRepo
DeploymentService <-- ArtifactRepo: site artifacts
deactivate ArtifactRepo

DeploymentService -> AppHost: deploy app
activate AppHost
DeploymentService <-- AppHost: app instance details
deactivate AppHost

SharePoint <-- DeploymentService: << AppInstalled >>
deactivate DeploymentService
SharePoint -> SharePoint: << AppInstalled >>

8.5 plant uml 系统 Contex 架构图

plantuml 替换原生样式 DARKORANGE/LIGHTORANGE/DARKBLUE/LIGHTBLUE/DARKRED/LIGHTRED/DARKGREEN/LIGHTGREEN

!define LIGHTBLUE
!includeurl C4-PlantUML/juststyle.puml

!define LIGHTBLUE
!includeurl C4-PlantUML/juststyle.puml
    skinparam backgroundColor transparent
    interface "JuJu" as juju
    interface "API" as api
    interface "Storage" as storage
    interface "Transform" as transform
    interface "Publisher" as publisher
    interface "Website" as website

    juju - [JuJu]

    website - [WebUI]
    [WebUI] .up.> juju
    [WebUI] .down.> storage
    [WebUI] .right.> api

    api - [Orchestra]
    transform - [Orchestra]
    publisher - [Orchestra]
    [Orchestra] .up.> juju
    [Orchestra] .down.> storage

    [Transform] .up.> juju
    [Transform] .down.> storage
    [Transform] ..> transform

    [Publisher] .up.> juju
    [Publisher] .down.> storage
    [Publisher] ..> publisher

    storage - [Storage]
    [Storage] .up.> juju

8.6 plantuml 通过html自定义图片样式

digraph G {
    node [shape="box",fontcolor="0xfffff", style=rounded]
    bgcolor="transparent"
    node [shape="box",fontcolor="#c475db"]
    edge [color="#a69fe0",fontcolor=white]
    UserCenter [shape=none margin=0 label=
    <<table border="0" cellspacing="0" cellborder="1">
    <tr>
    <td width="9"  height="9" fixedsize="true" sides="b"></td>
    <td width="81" height="9" fixedsize="true" sides="tl"></td>
    <td width="9"  height="9" fixedsize="true" sides="tr"></td>
    </tr>
    <tr>
    <td width="9"  height="37" fixedsize="true" sides="l"></td>
    <td width="81" height="37" fixedsize="true" sides="t">用户中心</td>
    <td width="9"  height="37" fixedsize="true" sides="lr"></td>
    </tr>
    <tr>
    <td width="9"  height="9" fixedsize="true" sides="lb"></td>
    <td width="81" height="9" fixedsize="true" sides="b"></td>
    <td width="9"  height="9" fixedsize="true" sides="tl"></td>
    </tr>
    </table>>]

    BPMCenter [shape=none margin=0 label=
    <<table border="0" cellspacing="0" cellborder="1">
    <tr>
    <td width="9"  height="9" fixedsize="true" sides="b"></td>
    <td width="81" height="9" fixedsize="true" sides="tl"></td>
    <td width="9"  height="9" fixedsize="true" sides="tr"></td>
    </tr>
    <tr>
    <td width="9"  height="23" fixedsize="true" sides="l"></td>
    <td width="81" height="23" fixedsize="true" sides="t">流程中心</td>
    <td width="9"  height="23" fixedsize="true" sides="lr"></td>
    </tr>
    <tr>
    <td width="9"  height="9" fixedsize="true" sides="lb"></td>
    <td width="81" height="9" fixedsize="true" sides="b"></td>
    <td width="9"  height="9" fixedsize="true" sides="tl"></td>
    </tr>
    </table>>]

    CenterApp [shape=none margin=0 label=
    <<table border="0" cellspacing="0" cellborder="1">
    <tr>
    <td width="9"  height="9" fixedsize="true" sides="b"></td>
    <td width="81" height="9" fixedsize="true" sides="tl"></td>
    <td width="9"  height="9" fixedsize="true" sides="tr"></td>
    </tr>
    <tr>
    <td width="9"  height="23" fixedsize="true" sides="l"></td>
    <td width="81" height="23" fixedsize="true" sides="t">应用中心</td>
    <td width="9"  height="23" fixedsize="true" sides="lr"></td>
    </tr>
    <tr>
    <td width="9"  height="9" fixedsize="true" sides="lb"></td>
    <td width="81" height="9" fixedsize="true" sides="b"></td>
    <td width="9"  height="9" fixedsize="true" sides="tl"></td>
    </tr>
    </table>>]

    rankdir = LR
    OA -> UserCenter [dir=back,minlen=2,label="HTTP API 接口"]
    OA -> BPMCenter [dir=back,minlen=2,label="HTTP API 接口"]
    BPMCenter -> CenterApp [dir=back,minlen=2,label="微服务接口"]
    UserCenter -> CenterApp [dir=back,minlen=2,label="微服务接口"]
}

8.7 plot 折线图

use org-plot/gnuplot for generate.

月份	旷工次数	漏签次数	早退次数	迟到次数
01	9598	7319	44	673
02	13788	8963	65	719
03	15024	8837	60	1005
04	11977	10662	92	807
05	10942	6005	191	575
06	9958	5943	142	530
07	5443	902	24	89

8.8 plot 柱状图

Sede	Max cites	H-xndex1	H-index
Chile	257.72	21.3	81.39
Leeds	165.77	19.6	19.68
Sao Paolo	71.00	41.5	81.50
Stockholm	134.19	12.3	94.33
Morelia	257.56	19.6	97.67

8.9 WHAT IS CONNECTOR

direction: right
platform : BPM

platform -> RocketMq: invoke  {
  style.animated: true
}
platform -> API: interface/http/https  {
  style.animated: true
}
platform -> DataBase: DB_Link  {style.animated: true}
RocketMq: {
shape: image
icon: https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Apache_RocketMQ_logo.svg/130px-Apache_RocketMQ_logo.svg.png?20210417072453
width: 10
style: {
    stroke: green
    font-color: green
    fill: white
  }
}

DataBase: {
shape: image
icon: https://cdn.icon-icons.com/icons2/1508/PNG/512/mysqlworkbench_103806.png
width: 20
}

API.style.multiple: true


RocketMq -> System : belong{
 style.animated: true
 style.stroke: "#53C0D8"
}
API -> System : belong{
 style.animated: true
 style.stroke: "#53C0D8"
}
DataBase -> System : belong{
 style.animated: true
 style.stroke: "#53C0D8"
}

8.10 d2 6.2

grid-rows: 4
grid-columns: 5
horizontal-gap: 20
vertical-gap: 5

*.class: [text; blue]

0,0: {
  label: "npm i -g\n@forge/cli"
  style: {
    fill: "#30304c"
    stroke: transparent
    font-color: white
    font: mono
    font-size: 10
    bold: false
  }
}
0,1: {
  label: "Set up an\nAtlassian site"
  class: [text; gray]
}
0,2.class: empty
0,3: {
  label: "View the hello\nworld app"
  class: [text; gray]
}
0,4: forge\ntunnel

1*.class: note
1*.label: ""
1,0
1,1
1,2
1,3
1,4

2,0: forge\nlogin
2,1: forge\ncreate
2,2: forge\ndeploy
2,3: forge\ninstall
2,4: {
  shape: diamond
  label: "Hot reload\nchanges?"
  class: [text; gray]
}

3*.class: note
3,0: Step 1
3,1: Step 2
3,2: Step 3
3,3: Step 4
3,4: ""

4,0: "" {
  grid-rows: 3
  grid-columns: 1
  grid-gap: 0

  class: []

  style: {
    fill: transparent
    stroke: transparent
  }

  *.style: {
    fill: transparent
    stroke: transparent
    font-color: "#30304c"
    font-size: 10
    bold: false
  }
  *.label.near: center-left
  *.height: 20
  a: ⬤ Forge CLI {
    style.font-color: "#0033cc"
  }

  b: ⬤ Required {
    style.font-color: "#30304c"
  }
  c: ⬤ Optional {
    style.font-color: "#cecece"
  }
}
4,1.class: empty
4,2.class: empty
4,3.class: empty
4,4: forge\ndeploy

0,0 -> 2,0 -> 2,1 -> 2,2 -> 2,3 -> 2,4: {
  class: arrow
}
2,1 -> 0,1: {
  class: arrow
  style.stroke: "#cecece"
}
2,3 -> 0,3: {
  class: arrow
  style.stroke: "#cecece"
}
2,4 -> 0,4: Yes {
  class: arrow
  style.font-size: 10
}
2,4 -> 4,4: No {
  class: arrow
  style.font-size: 10
}

classes: {
  text.style: {
    stroke: transparent
    font-color: white
    font: mono
    font-size: 10
    bold: false
  }
  text: {
    width: 100
    height: 60
  }
  blue.style: {
    fill: "#0033cc"
    stroke: "#0033cc"
    border-radius: 10
  }
  gray.style: {
    fill: "#cecece"
    stroke: "#cecece"
    border-radius: 10
  }
  note: {
    height: 30
    label.near: top-center
    style: {
      font-size: 10
      bold: false
      fill: transparent
      stroke: transparent
    }
  }
  empty: {
    label: ""
    width: 50
    height: 50
    style: {
      fill: transparent
      stroke: transparent
    }
  }
  arrow: {
    target-arrowhead.shape: arrow
    style: {
      stroke: black
      stroke-width: 2
    }
  }
}

9 org 转 Word

pandoc -o ~/Desktop/out.docx ~/.doom.d/README.org

10 插入时间

`C-c .`	插入当前时间 <2023-02-25 Sat>
`K`	lask week
`J`	next week
`L`	next day

11 Unicode 字符

Use unicode character could express of what you think more directly,cause an image symbol alway make the understanding more clearly. Here are some unicode website of listing those character,✌

https://unicode.yunser.com/common
https://cn.piliapp.com/symbol/

12 a

[X] Add list feature
[ ] copy to clipboard

#+CAPTION[Short caption]: square

N	N^2	N^3	N^4	sqrt(n)	sqrt[4](N)
1	1	1	1	1	1
2	4	8	16	1.4142136	1.1892071
3	9	27	81	1.7320508	1.3160740

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.org

README.org

doom org style

1 使用

2 字体样式

3 特殊说明

3.1 quote 摘要、引用

3.2 notice 注意事项、提醒

3.3 Declare a reference

4 段落及高亮

5 表格

5.1 AWK 表格

5.2 表格自增 ID

6 LaTex 公式

7 Org 代码

7.1 Java 代码

7.2 babel java

8 图片

8.1 引用本地图片

8.2 dot

8.3 dot sk

8.4 plantuml with style css

8.5 plant uml 系统 Contex 架构图

8.6 plantuml 通过html自定义图片样式

8.7 plot 折线图

8.8 plot 柱状图

8.9 WHAT IS CONNECTOR

8.10 d2 6.2

9 org 转 Word

10 插入时间

11 Unicode 字符

12 a

Files

README.org

Latest commit

History

README.org

File metadata and controls

doom org style

1 使用

2 字体样式

3 特殊说明

3.1 quote 摘要、引用

3.2 notice 注意事项、提醒

3.3 Declare a reference

4 段落及高亮

5 表格

5.1 AWK 表格

5.2 表格自增 ID

6 LaTex 公式

7 Org 代码

7.1 Java 代码

7.2 babel java

8 图片

8.1 引用本地图片

8.2 dot

8.3 dot sk

8.4 plantuml with style css

8.5 plant uml 系统 Contex 架构图

8.6 plantuml 通过html自定义图片样式

8.7 plot 折线图

8.8 plot 柱状图

8.9 WHAT IS CONNECTOR

8.10 d2 6.2

9 org 转 Word

10 插入时间

11 Unicode 字符

12 a