init
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
test.html
|
||||
.vscode/
|
||||
BIN
README.assets/image-20240322214551913.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
README.assets/image-20240322214612276.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
README.assets/image-20240322214639409.png
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
README.assets/image-20240322214704105.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
README.assets/image-20240322214726002.png
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
README.assets/image-20240322214854220.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
README.assets/image-20240322214927419.png
Normal file
|
After Width: | Height: | Size: 120 KiB |
BIN
README.assets/image-20240322215000805.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
README.assets/image-20240322215112732.png
Normal file
|
After Width: | Height: | Size: 76 KiB |
BIN
README.assets/image-20240322220055387.png
Normal file
|
After Width: | Height: | Size: 225 KiB |
67
README.md
Normal file
@@ -0,0 +1,67 @@
|
||||
# Fugu
|
||||
|
||||
`Fugu`是基于[YiNNx/typora-theme-lapis ](https://github.com/YiNNx/typora-theme-lapis)的一款`Typora`主题。
|
||||
|
||||
<img src="./README.assets/image-20240322220055387.png" alt="image-20240322220055387" style="width: 90%;" />
|
||||
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
目前只实现了浅色主题。
|
||||
|
||||
基于[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`文件夹下主要是字体。
|
||||
|
||||
## 预览
|
||||
|
||||
### 标题
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
### 分割线
|
||||
|
||||

|
||||
|
||||
### 强调
|
||||
|
||||

|
||||
|
||||
### 引用块
|
||||
|
||||

|
||||
|
||||
### 列表
|
||||
|
||||

|
||||
|
||||
### 代码
|
||||
|
||||

|
||||
|
||||
### 表格
|
||||
|
||||

|
||||
|
||||
### 链接
|
||||
|
||||

|
||||
|
||||
### 插件支持
|
||||
|
||||

|
||||
646
fugu.css
Normal file
@@ -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);
|
||||
}
|
||||
BIN
fugu/GlowSansSC-Normal-Bold.otf
Normal file
BIN
fugu/GlowSansSC-Normal-Book.otf
Normal file
BIN
fugu/MonaspaceArgon-Bold.woff
Normal file
BIN
fugu/MonaspaceArgon-Regular.woff
Normal file
393
演示.md
Normal file
@@ -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 (启用链接化功能查看)
|
||||
|
||||
|
||||
## 图像
|
||||
|
||||

|
||||

|
||||
|
||||
像链接一样,图像也有脚注样式的语法
|
||||
|
||||
![替代文本][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
|
||||
|
||||
|
||||
### [\<mark>](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
|
||||
|
||||

|
||||

|
||||
|
||||
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
|
||||
|
||||
|
||||
### [\<mark>](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.
|
||||
|
||||