commit 3b7ff309beaf8ac0c5927e0ba2e5f07646161b77 Author: lzy Date: Fri Mar 22 22:18:44 2024 +0800 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..22fae4c --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +test.html +.vscode/ diff --git a/README.assets/image-20240322214551913.png b/README.assets/image-20240322214551913.png new file mode 100644 index 0000000..00b3e0e Binary files /dev/null and b/README.assets/image-20240322214551913.png differ diff --git a/README.assets/image-20240322214612276.png b/README.assets/image-20240322214612276.png new file mode 100644 index 0000000..a1e2530 Binary files /dev/null and b/README.assets/image-20240322214612276.png differ diff --git a/README.assets/image-20240322214639409.png b/README.assets/image-20240322214639409.png new file mode 100644 index 0000000..5e223d0 Binary files /dev/null and b/README.assets/image-20240322214639409.png differ diff --git a/README.assets/image-20240322214704105.png b/README.assets/image-20240322214704105.png new file mode 100644 index 0000000..88cf246 Binary files /dev/null and b/README.assets/image-20240322214704105.png differ diff --git a/README.assets/image-20240322214726002.png b/README.assets/image-20240322214726002.png new file mode 100644 index 0000000..2175f82 Binary files /dev/null and b/README.assets/image-20240322214726002.png differ diff --git a/README.assets/image-20240322214854220.png b/README.assets/image-20240322214854220.png new file mode 100644 index 0000000..197bd61 Binary files /dev/null and b/README.assets/image-20240322214854220.png differ diff --git a/README.assets/image-20240322214927419.png b/README.assets/image-20240322214927419.png new file mode 100644 index 0000000..5d2db4a Binary files /dev/null and b/README.assets/image-20240322214927419.png differ diff --git a/README.assets/image-20240322215000805.png b/README.assets/image-20240322215000805.png new file mode 100644 index 0000000..66b7a1b Binary files /dev/null and b/README.assets/image-20240322215000805.png differ diff --git a/README.assets/image-20240322215112732.png b/README.assets/image-20240322215112732.png new file mode 100644 index 0000000..39d3fdb Binary files /dev/null and b/README.assets/image-20240322215112732.png differ diff --git a/README.assets/image-20240322220055387.png b/README.assets/image-20240322220055387.png new file mode 100644 index 0000000..6c673b7 Binary files /dev/null and b/README.assets/image-20240322220055387.png differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..143e797 --- /dev/null +++ b/README.md @@ -0,0 +1,67 @@ +# Fugu + +`Fugu`是基于[YiNNx/typora-theme-lapis ](https://github.com/YiNNx/typora-theme-lapis)的一款`Typora`主题。 + +image-20240322220055387 + + + +## 简介 + +目前只实现了浅色主题。 + +基于[YiNNx/typora-theme-lapis ](https://github.com/YiNNx/typora-theme-lapis)修改,也从[Theigrams/My-Typora-Themes](https://github.com/Theigrams/My-Typora-Themes),[billchen2k/typora-theme-next](https://github.com/BillChen2K/typora-theme-next)等主题获得了灵感,感谢这些优秀的主题! + +- 字体: + - [GlowSansSC](https://github.com/welai/glow-sans):未来荧黑,`next`主题选用的字体。 + - [MonaspaceArgon](https://github.com/githubnext/monaspace):我个人特别喜欢的一款等宽字体,由Github推出。 + +- 代码高亮:移植于[akamud/vscode-theme-onelight](https://github.com/akamud/vscode-theme-onelight/tree/master)。 + + + +## 用法 + +下载后将`fugu.css`和`fugu`文件夹放到主题目录下,即可启用。 + +> `fugu.css`为主题,`fugu`文件夹下主要是字体。 + +## 预览 + +### 标题 + +![image-20240322214551913](./README.assets/image-20240322214551913.png) + + + +### 分割线 + +![image-20240322214612276](./README.assets/image-20240322214612276.png) + +### 强调 + +![image-20240322214639409](./README.assets/image-20240322214639409.png) + +### 引用块 + +![image-20240322214704105](./README.assets/image-20240322214704105.png) + +### 列表 + +![image-20240322214726002](./README.assets/image-20240322214726002.png) + +### 代码 + +![image-20240322214854220](./README.assets/image-20240322214854220.png) + +### 表格 + +![image-20240322214927419](./README.assets/image-20240322214927419.png) + +### 链接 + +![image-20240322215000805](./README.assets/image-20240322215000805.png) + +### 插件支持 + +![image-20240322215112732](./README.assets/image-20240322215112732.png) \ No newline at end of file diff --git a/fugu.css b/fugu.css new file mode 100644 index 0000000..a35df48 --- /dev/null +++ b/fugu.css @@ -0,0 +1,646 @@ +:root { + --text-color: rgb(58, 71, 73); + --primary-color: #4870ac; + --block-background-color: #fafafa; + --marker-color: #a2b6d4; + --control-text-hover-color: #a2b6d4; + + --h1-before-content: "# "; + --h2-before-content: "┃"; + --h3-before-content: "『 "; + --h3--before-margin-left: -5px; + --h3-after-content: " 』"; + --h4-before-content: "♪ "; + --h4-after-content: " ♪"; +} + +/* + * Font-face for Cantarell, Source Han Serif CN and JetBrains Mono + */ +@font-face { + font-family: "GlowSansSC"; + font-weight: 400; + font-style: normal; + src: url("fugu/GlowSansSC-Normal-Book.otf") format("opentype"); +} + +@font-face { + font-family: "GlowSansSC"; + font-weight: bold; + font-style: normal; + src: url("fugu/GlowSansSC-Normal-Bold.otf") format("opentype"); +} + +@font-face { + font-family: "MonaspaceArgon"; + font-weight: bold; + font-style: normal; + src: url("fugu/MonaspaceArgon-Bold.woff") format("woff"); +} + +@font-face { + font-family: "MonaspaceArgon"; + font-weight: bold; + font-style: normal; + src: url("fugu/MonaspaceArgon-Regular.woff") format("woff"); +} + +/* + * Basic Style + */ + +#write { + max-width: 950px; + font-size: 1.1rem; + color: var(--text-color); + line-height: 1.6; + word-spacing: 0px; + letter-spacing: 0px; + word-break: break-word; + word-wrap: break-word; + text-align: left; + font-family: "GlowSansSC", "MonaspaceArgon"; + margin-bottom: 20rem; +} + +/* Strong */ + +#write strong { + color: var(--primary-color); +} + +/* Link */ + +#write a { + text-decoration: none; + word-wrap: break-word; + color: var(--primary-color); + border-bottom: 1px solid var(--primary-color); + margin: 2px; +} + +#write a:hover { + color: var(--control-text-hover-color); + border-bottom: 1px solid var(--control-text-hover-color); +} + +/* mark */ + +mark { + background: #ffffb5; + padding: 1px 0.15rem; + border-radius: 1px; +} + +/* + * Paragraph + */ + +#write + p, +#write blockquote p { + font-size: 1.1rem; + padding-top: 0.2rem; + padding-bottom: 0.2rem; + margin: 0; + line-height: 1.8rem; + /* color: var(--text-color); */ + color: #777; +} + +#write div[mdtype="toc"] { + font-size: 1.1rem; +} + +/* + * Header + */ + +#write h1, +#write h2, +#write h3, +#write h4, +#write h5, +#write h6 { + font-family: "GlowSansSC"; + margin: 1em 0 1em; + padding: 0px; + color: var(--primary-color); +} + +#write h1 { + font-weight: bold; + border-bottom: 3px solid var(--marker-color); +} + +#write h1::before { + content: var(--h1-before-content); +} + +#write h2::before { + content: var(--h2-before-content); +} + +#write h3::before { + content: var(--h3-before-content); + margin-left: var(--h3--before-margin-left); +} + +#write h3::after { + content: var(--h3-after-content); +} + +#write h4::before { + content: var(--h4-before-content); +} + +#write h4::after { + content: var(--h4-after-content); +} + +#write h1 { + font-size: 2.5em; +} + +#write h2 { + font-size: 1.75 em; +} + +#write h3 { + font-size: 1.45em; +} + +#write h4 { + font-size: 1.25em; +} + +#write h5 { + font-size: 1.1em; +} + +#write h6 { + font-size: 1em; +} + +/* + * List + */ + +::marker { + font-weight: bold; + color: var(--marker-color); +} + +li.md-list-item { + margin: 0.4rem 0; +} + +#write ul, +#write ol { + margin-top: 8px; + margin-bottom: 8px; + padding-left: -20px; +} + +#write ul { + list-style-type: disc; +} + +#write ul ul { + list-style-type: square; +} + +#write ol { + list-style-type: decimal; +} + +#write li section { + margin-top: 5px; + margin-bottom: 5px; + line-height: 1.7rem; + text-align: left; + color: var(--text-color); + font-weight: 500; +} + +/* + * Quote + */ +#write blockquote { + display: block; + font-size: 0.9em; + font-style: italic; + overflow: auto; + border-left: 5px solid var(--primary-color); + padding: 15px 30px 15px 20px; + margin-bottom: 20px; + margin-top: 20px; + background-color: rgba(66, 139, 185, 0.1); + color: #777; +} + +#write blockquote > :last-child { + margin-bottom: 0 !important; +} + +/* + * Inline code + */ +#write p code, +#write li code { + color: var(--primary-color); + font-size: 1.1rem; + font-weight: 500; + word-wrap: break-word; + padding: 2px 4px 2px; + border-radius: 7px; + margin: 2px; + background-color: var(--block-background-color); + font-family: "MonaspaceArgon"; + word-break: break-all; +} + +/* + * Img + */ +#write img { + display: block; + margin: 0 auto; + max-width: 80%; +} + +#write span img { + filter: drop-shadow(#d2dff4 0px 0px 8px); + border-radius: 3rem; + display: block; + margin: 0 auto; + padding: 2rem; +} + +/* + * Table + */ +#write table { + white-space: nowrap; + display: table; + text-align: left; + display: block; + overflow-x: auto; + text-align: left; + border-collapse: collapse; + border-spacing: 0px; + font-size: 1em; + margin: 0px 0px 20px; + width: 100%; +} +#write tbody { + border: 0; +} +#write table tr { + border: 0; + border-top: 1px solid #ccc; + background-color: white; +} + +#write table tr:nth-child(2n) { + background-color: #f8f8f8; +} +#write table tr th, +#write table tr th, +#write table tr td { + font-size: 1rem; + border: 1px solid #d9dfe4; + padding: 5px 10px; + text-align: left; +} +#write table tr th { + min-width: 10rem; + font-weight: bold; + background-color: #f8f8f8; + color: var(--primary-color); +} + +table.md-table td { + min-width: 32px; + background-color: white; +} + +/* + * Footnote Superscript + */ +#write .md-footnote { + font-weight: bold; + color: var(--primary-color); +} +#write .md-footnote > .md-text:before { + content: "["; +} +#write .md-footnote > .md-text:after { + content: "]"; +} + +/* Footnote */ +#write .md-def-name { + padding-right: 1.8ch; +} +#write .md-def-name:before { + content: "["; + color: #000; +} +#write .md-def-name:after { + color: #000; +} + +span.md-plain { + line-height: 2rem; +} + +p.md-end-block.md-p { + line-height: 2rem; + color: var(--text-color); + margin: 4px 0; +} + +/* + * Dividing line + */ +/* hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 2px solid #eef2f5; + border-radius: 2px; +} */ +hr { + background-image: repeating-linear-gradient( + -45deg, + var(--marker-color), + var(--marker-color) 4px, + transparent 4px, + transparent 8px + ); + border: 0; + height: 3px; + margin: 40px 0; +} + +/* Checkbox */ + +#write input[type="checkbox"] { + width: 0; +} + +.task-list-item input::before { + content: ""; + display: inline-block; + width: 1.0125rem; + height: 1.0125rem; + vertical-align: middle; + text-align: center; + border: 1px solid var(--marker-color); + border-radius: 1.2rem; + background-color: #fdfdfd; + margin-left: -0.1rem; + margin-right: 0.1rem; + margin-top: -0.6rem; +} + +.task-list-item input:checked::before { + content: "✓"; + font-weight: bold; + -webkit-text-stroke: 1px var(--primary-color); + color: var(--primary-color); + background-color: white; + font-size: 0.75rem; + line-height: 0.8rem; +} + +/* + * Sidebar + */ +#typora-sidebar { + font-family: "MonaspaceArgon", "Source Han Serif CN"; + display: block; + height: 100%; + color: #686d75; + line-height: 1.2rem; + font-size: 0.8rem; + min-width: 50px; + background-color: white; +} + +/* + * Sidebar - FileNode + */ + +.info-panel-tab-wrapper { + width: 100%; + display: flex; + height: 2px; + -webkit-app-region: drag; +} + +.active-tab-files #info-panel-tab-file .info-panel-tab-border, +.active-tab-outline #info-panel-tab-outline .info-panel-tab-border { + border-radius: 10px; + height: 1px; + background-color: var(--primary-color); +} + +.file-node-content { + color: var(--primary-color); +} +span.file-node-title-name-part { + color: var(--text-color); +} +span.file-node-title-ext-part { + color: var(--text-color); +} +.file-node-icon { + padding-right: 0.2rem; +} + +.file-tree-node.active > .file-node-background { + background-color: var(--block-background-color); + border-left: 4px solid var(--primary-color); + border-color: var(--primary-color); +} + +/* + * Sidebar - Outline + */ + +#outline-content { + display: block; + height: 100%; + overflow-x: hidden; + line-height: 1.2rem; + font-size: 0.9rem; + min-width: 50px; +} + +.outline-item { + padding-left: 2em; +} + +/* + * Scrollbar + */ + +#outline-content::-webkit-scrollbar { + width: 0; +} +#file-library::-webkit-scrollbar { + width: 0; +} + +::-webkit-scrollbar-track { + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + background: rgba(179, 179, 179, 0.425); +} + +::-webkit-scrollbar { + width: 1rem; +} + +/* + * Code Block - Style + */ + +.md-fences:before { + content: " "; + display: block; + width: 100%; + background-size: 40px; + background-repeat: no-repeat; + background-color: #282c34; + margin-bottom: -7px; + border-radius: 5px; + background-position: 10px 10px; +} + +.CodeMirror-wrap .CodeMirror-scroll { + overflow-x: auto; +} +.cm-s-inner.CodeMirror { + margin: 2rem 0; + padding: 1.2rem 0.8rem; + color: #4f5467; + font-family: "MonaspaceArgon"; + border-radius: 10px; + background-color: var(--block-background-color); + /* border: 1px solid #eef2f5; */ + line-height: 1.6rem; +} + +.CodeMirror-gutters { + border-right: 1px solid #a2b6d452; + background: inherit; + white-space: nowrap; +} + +pre.CodeMirror-line { + padding: 0 1.2rem; +} + +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + text-align: right; + color: var(--primary-color); +} + +/* + * Code Block - Color Scheme + */ + +/* 关键字 */ +.cm-s-inner .cm-keyword { + color: #a626a4 !important; +} + +/* 操作符 */ +.cm-s-inner .cm-operator { + color: #005cc5 !important; +} + +.cm-s-inner .cm-property { + color: #a649ae !important; +} + +/* 变量和函数名 */ +.cm-s-inner .cm-variable { + color: #5a68ee !important; +} +.cm-s-inner .cm-def { + color: #c18401 !important; +} + +/* 内置函数/类型 */ +.cm-s-inner .cm-builtin, +.cm-s-inner .cm-type { + color: #005cc5 !important; +} + +/* 数字 */ +.cm-s-inne-86801number { + color: #d73a49 !important; +} + +/* 字符串 */ +.cm-s-inner .cm-string { + color: #67a154 !important; +} + +/* 注释 */ +.cm-s-inner .cm-comment { + color: #a0a1a7 !important; +} + +/* 元数据和属性 */ +.cm-s-inner .cm-meta, +.cm-s-inner .cm-attribute { + color: #22863a !important; +} + +/* 错误 */ +.cm-s-inner .cm-error { + background-color: #f97583 !important; + color: #ffffff !important; +} + +.cm-s-inner .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; +} +.CodeMirror div.CodeMirror-cursor { + border-left: 1px solid var(--primary-color); + z-index: 3; +} + +.cm-s-inner div.CodeMirror-selected { + background: rgba(167, 178, 189, 0.2) !important; +} + +.cm-s-inner.CodeMirror-focused div.CodeMirror-selected { + background: rgba(167, 178, 189, 0.2) !important; +} + +.cm-s-inner .CodeMirror-selected, +.cm-s-inner .CodeMirror-selectedtext { + background-color: rgba(167, 178, 189, 0) !important; +} + +.cm-s-inner .CodeMirror-line::-moz-selection, +.cm-s-inner .CodeMirror-line > span::-moz-selection, +.cm-s-inner .CodeMirror-line > span > span::-moz-selection { + background-color: rgba(167, 178, 189, 0.2); +} + +.cm-s-inner .CodeMirror-line::selection, +.cm-s-inner .CodeMirror-line > span::selection, +.cm-s-inner .CodeMirror-line > span > span::selection { + background-color: rgba(167, 178, 189, 0.2); +} diff --git a/fugu/GlowSansSC-Normal-Bold.otf b/fugu/GlowSansSC-Normal-Bold.otf new file mode 100644 index 0000000..5d64426 Binary files /dev/null and b/fugu/GlowSansSC-Normal-Bold.otf differ diff --git a/fugu/GlowSansSC-Normal-Book.otf b/fugu/GlowSansSC-Normal-Book.otf new file mode 100644 index 0000000..1679bd2 Binary files /dev/null and b/fugu/GlowSansSC-Normal-Book.otf differ diff --git a/fugu/MonaspaceArgon-Bold.woff b/fugu/MonaspaceArgon-Bold.woff new file mode 100644 index 0000000..1c00d13 Binary files /dev/null and b/fugu/MonaspaceArgon-Bold.woff differ diff --git a/fugu/MonaspaceArgon-Regular.woff b/fugu/MonaspaceArgon-Regular.woff new file mode 100644 index 0000000..adcd7ba Binary files /dev/null and b/fugu/MonaspaceArgon-Regular.woff differ diff --git a/演示.md b/演示.md new file mode 100644 index 0000000..2c8cbfb --- /dev/null +++ b/演示.md @@ -0,0 +1,393 @@ +# 一级标题 + +## 二级标题 + +### 三级标题 + +#### 四级标题 + +##### 五级标题 + +###### 六级标题 + + +## 水平线 + +___ + +--- + +*** + + +## 排版替换 + +启用排版选项查看结果。 + +(c) (C) (r) (R) (tm) (TM) (p) (P) +- + +测试.. 测试... 测试..... 测试?..... 测试!.... + +!!!!!! ???? ,, -- --- + +“智能引号,双引号”和‘单引号’ + + +## 强调 + +**这是加粗文字** + +__这是加粗文字__ + +*这是斜体文字* + +_这是斜体文字_ + +~~删除线~~ + + +## 引用 + + +> 引用也可以嵌套... +> +> > ...通过在旁边增加更多的大于号... +> > +> > > ...或者使用箭头之间的空格。 + + +## 列表 + +无序列表 + ++ 通过在一行开头使用`+`,`-`或`*`来创建列表 + ++ 子列表通过缩进2个空格制作: + + - 更换标记字符强制开始新列表: + + * 在Ac tristique libero volutpat at + + + Facilisis in pretium nisl aliquet + + - Nulla volutpat aliquam velit + ++ 非常简单! + +有序列表 + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. 你可以使用顺序数字... +2. ...或者保持所有数字为`1.` + +带偏移的编号开始: + +57. foo +58. bar + + +## 代码 + +行内 `代码` + +缩进代码 + + // 一些评论 + 代码行 1 + 代码行 2 + 代码行 3 + + +代码块“栅栏” + +``` +这里填写示例文本... +``` + +语法高亮 + +``` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +## 表格 + +| 选项 | 描述 | +| ------ | -------------------------------------- | +| data | 供模板使用的数据文件路径。 | +| engine | 用于处理模板的引擎。默认为Handlebars。 | +| ext | 目标文件的扩展名。 | + +右对齐列 + +| 选项 | 描述 | +| -----: | -------------------------------------: | +| data | 供模板使用的数据文件路径。 | +| engine | 用于处理模板的引擎。默认为Handlebars。 | +| ext | 目标文件的扩展名。 | + + +## 链接 + +[链接文本](http://dev.nodeca.com) + +[带标题的链接](http://nodeca.github.io/pica/demo/ "标题文本!") + +自动转换的链接 https://github.com/nodeca/pica (启用链接化功能查看) + + +## 图像 + +![小黄人](https://octodex.github.com/images/minion.png) +![暴风兵猫](https://octodex.github.com/images/stormtroopocat.jpg "暴风兵猫") + +像链接一样,图像也有脚注样式的语法 + +![替代文本][id] + +文档后面用来定义URL位置的引用: + +[id]: https://octodex.github.com/images/dojocat.jpg "道场猫" + + +## 插件 + +`markdown-it`的杀手锏是对[语法插件](https://www.npmjs.org/browse/keyword/markdown-it-plugin)的非常有效支持。 + + +### [表情符号](https://github.com/markdown-it/markdown-it-emoji) + +> 经典标记::wink: :cry: :laughing: :yum: +> +> 快捷方式(表情图标)::-) :-( 8-) ;) + +查看[如何更改输出](https://github.com/markdown-it/markdown-it-emoji#change-output) 使用twemoji。 + +### [下标](https://github.com/markdown-it/markdown-it-sub) / [上标](https://github.com/markdown-it/markdown-it-sup) + +- 19^th^ +- H~2~O + + +### [\](https://github.com/markdown-it/markdown-it-mark) + +==标记文本== + + +### [脚注](https://github.com/markdown-it/markdown-it-footnote) + +脚注1链接[^first]。 + +脚注2链接[^second]。 + +行内脚注^[行内脚注文本]定义。 + +重复的脚注引用[^second]。 + +[^first]: 脚注**可以包含标记** + + 并且包含多个段落。 + +[^second]: 脚注文本。 + + + +# h1 Heading 8-) + +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rules + +___ + +--- + +*** + + +## Typographic replacements + +Enable typographer option to see result. + +(c) (C) (r) (R) (tm) (TM) (p) (P) +- + +test.. test... test..... test?..... test!.... + +!!!!!! ???? ,, -- --- + +"Smartypants, double quotes" and 'single quotes' + + +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + + +## Blockquotes + + +> Blockquotes can also be nested... +> > ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as `1.` + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +``` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +## Tables + +| Option | Description | +| ------ | ------------------------------------------------------------ | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| -----: | -----------------------------------------------------------: | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +## Links + +[link text](http://dev.nodeca.com) + +[link with title](http://nodeca.github.io/pica/demo/ "title text!") + +Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +Like links, Images also have a footnote style syntax + +![Alt text][id] + +With a reference later in the document defining the URL location: + +[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" + + +## Plugins + +The killer feature of `markdown-it` is very effective support of +[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). + + +### [Emojies](https://github.com/markdown-it/markdown-it-emoji) + +> Classic markup: :wink: :cry: :laughing: :yum: +> +> Shortcuts (emoticons): :-) :-( 8-) ;) + +see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. + + +### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) + +- 19^th^ +- H~2~O + + +### [\](https://github.com/markdown-it/markdown-it-mark) + +==Marked text== + + +### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + +Footnote 1 link[^first]. + +Footnote 2 link[^second]. + +Inline footnote^[Text of inline footnote] definition. + +Duplicated footnote reference[^second]. + +[^first]: Footnote **can have markup** + + and multiple paragraphs. + +[^second]: Footnote text. + diff --git a/演示.pdf b/演示.pdf new file mode 100644 index 0000000..1abb923 Binary files /dev/null and b/演示.pdf differ