class |
---|
emtoja |
- 安装 VS Code
- 安装 Prince
- 安装 Markdown Preview Enhanced 插件
- 修改主题
- 复制 style.less 文件和 assets 文件夹到 .mume 文件夹下。可以参考这个 链接。
- 重启软件,将 Markdown Preview Enhanced 的 预览主题 替换为 none。
⚠️ 请注意:本主题并未针对导出为 图片 格式做任何优化。
⚠️ 请注意:本主题主要在 macOS 系统上进行的测试。在 Windows 系统上可能会有些许显示差异。具体差异见 差异。
-
为什么我安装主题后,看起来会有点模糊?
Windows 系统的字体渲染和 macOS 系统的字体渲染有些许不同,在 macOS 上看起来很清晰的字体,可能在 Windows 上不会那么的清晰。如果能很清晰的看出有叠影,可以尝试注释掉下方的代码:
-webkit-font-smoothing: "auto"; -webkit-text-stroke-width: calc(calc(40px - 1em) / 170);
-
我是用的是 Linux 系统,这个主题会兼容吗?
如果正在使用的是 Linux 系统,例如:Ubuntu、OpenSUSE 等。基本上不会有太多的显示问题。大体而言,所有系统唯一有区别的地方就在于字体。在 Deepin 20.5 上经过测试发现:导出为 PDF 时,因为系统缺失 楷体、仿宋 等字体而导致无法正常显示文字。解决办法也很简单,只要安装必要的字体即可。
-
为什么我在 Edge、Chrome 等浏览器上可以正常显示楷体、仿宋等字体,但是在 Safari 上的显示情况却不尽人意呢?
Safari 浏览器自某个版本之后,就禁止调用本地字体显示。如果要预览文件或者其他情形,请不要使用 Safari。
- 2022.05.02
- 调整了代码的字体显示不正常的问题。将代码的中文字体更改为楷体。
- 修复了不显示页眉页脚的问题
⚠️ 注意:当您发现无法正常显示页眉页脚时,请查看@page:left
和@page:right
中间是否有空格。如果存在空格,请用文本编辑器将其清除后,再重新生成 pdf。。
- 2022.05.03
- 图片可以浮动于文字周围
- 标题可以自动编号(二级到四级标题)
- 2022.05.04
- 支持 STIX MATH、emoji 字体
- 2022.05.05
- 支持目录页
- 支持相互引用关于相互引用的用法可以参见 PrinceXML
- 2023.02
- 距离本月截止,更新了较多的内容,主要包括:目录、旁注、中文排版、图片缩放等。详细的使用方法可以参见下方的介绍。
- 2023.03 距离本月截止,再次更新的项目主要包括:
- 支持 ruby 标签。现在您可以使用
[汉字]^{注音}
的语法来快速为某些文字做标注。这是一个示例: [汉字]^{hànzi}。虽然目前 princexml 并未完整支持还标签,但并不影响输出。 - 支持大面积更换语言字体显示。现在您可以使用
<div id="mainbody_jp"></div>
这一标签来快速切换主要字体为日文字体。 - 更新了试卷模式,并作了适当调整。页面现在可以容纳能多的内容。
- 目前仍在尝试打印为更多的页面大小样式。
- 支持 ruby 标签。现在您可以使用
!!! warning 字体安装
默认使用了如下字体:
英文字体 | 中文字体 | 日文字体 |
---|---|---|
Avenir Next | 思源黑体 | Kozuka Gothic Pr6N |
Latin Modern Roman | 思源宋体 | Kozuka Mincho Pr6N |
Latin Modern Roman Dunhill | 江城圆体 | A-OTF Kyoukasho ICA Pro |
Latin Modern Roman Slanted | TH-Khaai-PP0 | A-OTF Jomin Std |
Latin Modern Mono | HYFangSongS | A-OTF Likurei Std |
FZLiBian-S02 |
下面是各操作系统缺省情况下显示的字体:
- 如果您使用的是 Windows 系统,可以不需要额外安装字体。此时,默认的字体分别为:中易宋体、黑体、楷体、仿宋;日文的默认字体为:YuMincho、YuGothic、YuKyokasho。如果正常显示 圆体、隶书体等,请下载专门的字体,并在 less 文件中声明。
- 如果您使用的是 macOS 系统,可以不需要额外安装字体。此时默认的字体分别为:苹方字体、华文字体。日文字体的显示同 Windows。
- 如果您使用的是 Ubuntu、Opensuse、ArchLinux 等常见的操作系统,也可以不需要额外安装字体。此时默认显示的多为:文鼎字体和 noto 字体。但部分操作系统可能并未预装中文写作环境所需要的楷体、仿宋等字体。请自行安装。
可以通过这个链接 font 下载所需字体。大概有 290M。
阿里云盘目前并不不支持分享 ttf 格式的思源字体。但可以通过这个链接下载 (otc 格式,Windows 系统可能无法使用。也可自行搜索下载。):思源黑体,思源宋体。
可以通过插件 Markdown Preview Enhanced 或者 Markdown TOC 来快速的插入目录。
如果想要将目录正常显示在打印页面中,可以将目录包裹在下列代码之中。
<div class="toc">
<h2>table of contents</h2>
目录所在
</div>
- 目录的预览。主题目前设定的目录在网页(宽度大于 1200px)中和在打印中显示的样式是不同的。当宽度小于 1200px 时默认不对目录进行处理。
- 在不添加任何 HTML 元素的情况下,将默认为一篇文章。打印时,一级标题作为分页处,且除一级标题外,所有标题自动编号。
- 在使用
<div class="documents">
包裹所有文档的情况下,展示样式和不使用 HTML 元素相同。 - 在使用
<div class="documents_chapter">
包裹所有文档的情况下,一级标题将自动编号【形如:第一章等】。→更适合写长文档、书籍 - 在使用
<div class="documents_chapter_old">
包裹所有文档的情况下,一级标题将自动编号【形如:XX 第一等】。→更适合写古籍文档、书籍 - 在使用
<div class="documents_chapter_old_none">
包裹所有文档的情况下,一级标题将自动编号【形如:XX 第一等】,其余标题将不会再编号。→更适合写古籍文档、书籍 - 在使用
<div class="documents_volume">
包裹所有文档的情况下,一级标题将自动编号【形如:第一章等】,另外可以使用<div class="volume">
来生成多个卷【形如:第一卷】。→更适合写长文档、书籍 - 在使用
<div class="documents_volume_old">
包裹所有文档的情况下,一级标题将自动编号【形如:第一章等】,另外可以使用<div class="volume">
来生成多个卷【形如:卷之一】。→更适合写长文档、书籍
使用部分 html 标签可以达到特殊效果。如:修改字体、颜色等。具体见 其他说明
当然,也可以使用 Latex 语法来更改字体样式。例如:
$\color{blue}{RED}$ $\huge{SMALL}$ $\small\color{red}{HUGE}$
!!! question 我想要使用斜体,可是我使用了_ _
和* *
之后,却发现字体并没有发生太大的变化,这是为什么?
在这个主题里面,默认下的_ _
和* *
会将字体从中文字体变换为日文字体。例如:
- 这是默认下的日文字体:あいうえお。
- 这是强调下的日文字体:_あいうえお_。
那么,我该如何使用斜体呢?
可以通过为文字添加`<i></i>`标签来让文字倾斜。例如:
- 这是默认下的中文字体:这是没有添加 i 标签的中文。
- 这是斜体下的中文字体:<i>这是添加了 i 标签的中文</i>。
找到 style.less 文件,修改下方的商无辛
为自己想要的水印即可。color
、font-size
等也可以按照需要修改。
@prince-overlay {
color: rgba(0, 0, 0, 0.015);
content: "商无辛";
font-size: 10pt;
font-family: var(--font-hei-cn);
vertical-align: top;
}
- ![shadow](图片地址,添加 shadow 可以增加阴影)
- ![center](图片地址,添加 center 可以居中图片)
- ![50](图片地址,调整 百分比 可以更改大小。比如:25,50,75,85,95)
- ![left or right](图片地址,让图片 浮动 于文字的左右侧)
如果想要让图片浮动于文字的左右侧,可以添加left
或者right
来实现。请注意,在使用浮动时,请同时调整图片大小。另外,也可以通过主动添加多个换行<br />
来实现某些效果。例如:
这是一段测试文字。道可道也 [^①],非恒道也 [^②]。名可名也 [^③],非恒名也。无名 [^④],万物之始也;有名 [^⑤],万物之母也 [^⑥]。故恒无欲也 [^⑦],以观其眇 [^⑧];恒有欲也,以观其所徼 [^⑨]。两者同出,异名同谓 [^⑩]。玄之又玄 [^⑾],众眇之门 [^⑿]。
这是一段测试文字。道可道也 [^①],非恒道也 [^②]。名可名也 [^③],非恒名也。无名 [^④],万物之始也;有名 [^⑤],万物之母也 [^⑥]。故恒无欲也 [^⑦],以观其眇 [^⑧];恒有欲也,以观其所徼 [^⑨]。两者同出,异名同谓 [^⑩]。玄之又玄 [^⑾],众眇之门 [^⑿]。
-
调整页面大小。找到这行代码,按照需要修改即可。
//通过 size 来控制打印大小,可选值为任意的尺寸组合或者固定的页面尺寸。例如,size:8in 11in(width*height);size:a4 landscape;size:a4 portrait
-
调整页眉页脚。修改第 1139 行到 1193 行的代码即可。(以
@page:right
和@page:left
开头) -
调整脚注。找到
.fn {
并修改其中的代码即可。 -
为适合打印输出,默认设置所有的一级标题前都会有换页符,即在新的一页上重新开始,且全部居于左侧。如果不需要的话,可以删去
h1
下的这段代码:break-before: right
。
Markdown Preview Enhanced 无法将 mermaid 导出为 PDF。作为替代,可以使用 dotted 来制图。
请忽视图片的配色,只为演示。
digraph demo {
label="示例"
color="pink"
bgcolor="white"
fontsize="12pt"
rankdir="TB"
node[fontname="思源宋体",color="#dfdfdf",fontcolor="red"]
father[label="爸爸", shape="box" , fillcolor=black,style=filled,fontcolor=white]
mother[label="妈妈", shape="box", style=dashed]
brother[label="哥哥", shape="circle",style=bold]
sister[label="姐姐", shape="circle"]
node[color="#FF6347"]
strangers[label="路人",style=dotted]
edge[fontname="思源黑体",color="blue",fontcolor="blue"]
father->mother[label="夫妻", dir="both"]
father->brother[label="父子"]
father->sister[label="父子"]
father->我 [label="父子"]
mother->{brother,sister, 我}[label="母子"]
{rank=same; father, mother}
{rank=same; brother,sister, 我}
}
-
如何添加脚注:使用
<span class="fn"></span>
包裹脚注内容即可。 -
如何快速分页:使用
<hr class="break_after">
。 -
如何大面积使用楷体:
<div class="intro"></div>
。 -
如何 90 度旋转页面:
<div class="vertical_contents">
。 -
添加标签:kbd 标签 臣本布衣
-
修改字体:
- 中文tt 标签 臣本布衣あいうえお
- 日文tt 标签 臣本布衣あいうえお
- 中文samp 标签 臣本布衣
- 日文samp 标签 臣本布衣
- ruby 标签 臣本布衣
-
其他的具有语义的标签:
- ins 臣本布衣,用于公式
- var 臣本布衣,用于警示
- dfn 臣本布衣,用于例题
以下内容来源自 MPE 官方
Markdown
是一种文本格式。你可以用它来控制文档的显示。使用 markdown,你可以创建粗体的文字,斜体的文字,添加图片,并且创建列表 等等。基本上来讲,Markdown 就是普通的文字加上 #
或者 *
等符号。
# 这是 <h1> 一级标题
## 这是 <h2> 二级标题
### 这是 <h3> 三级标题
#### 这是 <h4> 四级标题
##### 这是 <h5> 五级标题
###### 这是 <h6> 六级标题
如果你想要给你的标题添加 id
或者 class
,请在标题最后添加 {#id .class1 .class2}
。例如:
# 这个标题拥有 1 个 id {#my_id}
# 这个标题有 2 个 classes {.class1 .class2}
这是一个 MPE 扩展的特性。
*这会是 斜体 的文字*
_这会是 斜体 的文字_
**这会是 粗体 的文字**
__这会是 粗体 的文字__
_你也 **组合** 这些符号_
~~这个文字将会被横线删除~~
`这是一串行内代码 <inline_code>`
- Item 1
- Item 2
- Item 2a
- Item 2b
1. Item 1
1. Item 2
1. Item 3
1. Item 3a
1. Item 3b
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 1
- Item 2
- Item 3
- Item 3a
- Item 3b
- @mentions, #refs, links, formatting, and
tagssupported - list syntax required (any unordered or ordered list supported)
- this is a complete item
- this is an incomplete item
添加图片 {#23}
![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)
https://github.com - 自动生成!
[GitHub](https://github.com)
- https://github.com - 自动生成!
- GitHub
正如 Kanye West 所说:
> We're living the future so
> the present is our past.
正如 Kanye West 所说:
We're living the future so the present is our past.
如下,三个或者更多的
---
连字符
---
星号
---
下划线
你可以在你的代码上面和下面添加 ````` 来表示代码块。
你可以给你的代码块添加任何一种语言的语法高亮。例如,给 ruby 代码添加语法高亮:
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
会得到下面的效果:
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
你可以给你的代码块设置 class
。例如,添加 class1 class2
到一个代码块:
```javascript {.class1 .class}
function add(x, y) {
return x + y
}
```
如果你想要你的代码块显示代码行数,只要添加 line-numbers
class 就可以了。例如:
function add(x, y) {
return x + y
}
你可以通过添加 highlight
属性的方式来高亮代码行数:
```javascript {highlight=10}
```
```javascript {highlight=10-20}
```
```javascript {highlight=[1-10,15,20-22]}
```
| First Header | Second Header |
| --------------------------- | ---------------------------- |
| Content from cell 1 | Content from cell 2 |
| Content in the first column | Content in the second column |
First Header | Second Header |
---|---|
Content from cell 1 | Content from cell 2 |
Content in the first column | Content in the second column |
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 1 | 单元格 2 | 单元格 3 |
需要在插件设置中打开
enableExtendedTableSyntax
选项来使其工作。
只适用于
markdown-it parser
而不适用于pandoc parser
。 缺省下是启用的。你可以在插件设置里禁用此功能。
:smile:
:fa-car:
😄,:fa-car:
Content [^1]
[^1]: Hi! This is a footnote
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
Content 1
*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.
==marked==
30^th^
H~2~O
==marked==
30^th^
H2O
CriticMarkup 缺省是禁用的,你可以通过插件设置来启动它。 有关 CriticMarkup 的更多信息,请查看 CriticMarkup 用户指南.
这里有 5 种基本语法:
- 添加
{++ ++}
- 删除
{-- --}
- 替换
{~~ ~> ~~}
- 注释
{>> <<}
- 高亮
{== ==}{>> <<}
CriticMarkup 仅可用于 markdown-it parser,不与 pandoc parser 兼容。
注意:注意已经修改了原本的 CriticMarkup 所生成样式。如果需要原本 CriticMarkup 的功能需要禁用主题内的 ins
、del
等元素的相关代码。
{++CriticMarkup++} {>>仅可用于<<} {~~markdownit parser ~> markdown-it parser~~},不与 {--pandoc parser--} 兼容。
!!! note This is the admonition title
This is the admonition body
请在 https://squidfunk.github.io/mkdocs-material/reference/admonitions/ 查看更多信息
!!! info 测试内容
!!! warning "" 没有标题的测试内容
!!! warning 标题测试 有标题的测试内内容
Title of Contents
contents contents contents contents-
为文字创建一个方框
为文字创建一个方框,默认文字居中。边框创建.border
-
为段落分为两列。分列
.col2
这是第一列,文章内容如下。
道如果可以用言语来表述,那它就是常道 (道是可以用言语来表述的,它并非一般的道);名如果可以用文辞去命名,那它就是常名(名也是可以说明的,它并非普通的名)。
无
可以用来表述天地浑沌未开之际的状况;而==有==,则是宇宙万物产生之本原的命名。因此,要常从无
中去观察领悟道的奥妙;要常从==有==中去观察体会道的端倪。无与有这两者,来源相同而名称相异,都可以称之为玄妙、深远。它不是一般的玄妙、深奥,而是玄妙又玄妙、深远又深远,是宇宙天地万物之奥妙的总门(从“有名”的奥妙到达无形的奥妙,道是洞悉一切奥妙变化的门径)。这是第二列,文章内容如下。
道如果可以用言语来表述,那它就是常道 (道是可以用言语来表述的,它并非一般的道);名如果可以用文辞去命名,那它就是常名(名也是可以说明的,它并非普通的名)。
无
可以用来表述天地浑沌未开之际的状况;而==有==,则是宇宙万物产生之本原的命名。因此,要常从无
中去观察领悟道的奥妙;要常从==有==中去观察体会道的端倪。无与有这两者,来源相同而名称相异,都可以称之为玄妙、深远。它不是一般的玄妙、深奥,而是玄妙又玄妙、深远又深远,是宇宙天地万物之奥妙的总门(从“有名”的奥妙到达无形的奥妙,道是洞悉一切奥妙变化的门径)。 -
字体更改字体更改
.cn/.jp/.song/.hei/.kai
道如果可以用言语来表述,那它就是常道 (道是可以用言语来表述的,它并非一般的道);名如果可以用文辞去命名,那它就是常名(名也是可以说明的,它并非普通的名)。
无
可以用来表述天地浑沌未开之际的状况;而==有==,则是宇宙万物产生之本原的命名。因此,要常从无
中去观察领悟道的奥妙;要常从==有==中去观察体会道的端倪。无与有这两者,来源相同而名称相异,都可以称之为玄妙、深远。它不是一般的玄妙、深奥,而是玄妙又玄妙、深远又深远,是宇宙天地万物之奥妙的总门(从“有名”的奥妙到达无形的奥妙,道是洞悉一切奥妙变化的门径)。道如果可以用言语来表述,那它就是常道 (道是可以用言语来表述的,它并非一般的道);名如果可以用文辞去命名,那它就是常名(名也是可以说明的,它并非普通的名)。
无
可以用来表述天地浑沌未开之际的状况;而==有==,则是宇宙万物产生之本原的命名。因此,要常从无
中去观察领悟道的奥妙;要常从==有==中去观察体会道的端倪。无与有这两者,来源相同而名称相异,都可以称之为玄妙、深远。它不是一般的玄妙、深奥,而是玄妙又玄妙、深远又深远,是宇宙天地万物之奥妙的总门(从“有名”的奥妙到达无形的奥妙,道是洞悉一切奥妙变化的门径)。道如果可以用言語來表述,那它就是常道 (道是可以用言語來表述的,它並非一般的道);名如果可以用文辭去命名,那它就是常名(名也是可以說明的,它並非普通的名)。
無
可以用來表述天地渾沌未開之際的狀況;而==有==,則是宇宙萬物產生之本原的命名。因此,要常從無
中去觀察領悟道的奧妙;要常從==有==中去觀察體會道的端倪。無與有這兩者,來源相同而名稱相異,都可以稱之為玄妙、深遠。它不是一般的玄妙、深奧,而是玄妙又玄妙、深遠又深遠,是宇宙天地萬物之奧妙的總門(從「有名」的奧妙到達無形的奧妙,道是洞悉一切奧妙變化的門徑)。道如果可以用言语来表述,那它就是常道 (道是可以用言语来表述的,它并非一般的道);名如果可以用文辞去命名,那它就是常名(名也是可以说明的,它并非普通的名)。
无
可以用来表述天地浑沌未开之际的状况;而==有==,则是宇宙万物产生之本原的命名。因此,要常从无
中去观察领悟道的奥妙;要常从==有==中去观察体会道的端倪。无与有这两者,来源相同而名称相异,都可以称之为玄妙、深远。它不是一般的玄妙、深奥,而是玄妙又玄妙、深远又深远,是宇宙天地万物之奥妙的总门(从“有名”的奥妙到达无形的奥妙,道是洞悉一切奥妙变化的门径)。道如果可以用言语来表述,那它就是常道 (道是可以用言语来表述的,它并非一般的道);名如果可以用文辞去命名,那它就是常名(名也是可以说明的,它并非普通的名)。
无
可以用来表述天地浑沌未开之际的状况;而==有==,则是宇宙万物产生之本原的命名。因此,要常从无
中去观察领悟道的奥妙;要常从==有==中去观察体会道的端倪。无与有这两者,来源相同而名称相异,都可以称之为玄妙、深远。它不是一般的玄妙、深奥,而是玄妙又玄妙、深远又深远,是宇宙天地万物之奥妙的总门(从“有名”的奥妙到达无形的奥妙,道是洞悉一切奥妙变化的门径)。道如果可以用言語來表述,那它就是常道 (道是可以用言語來表述的,它並非一般的道);名如果可以用文辭去命名,那它就是常名(名也是可以說明的,它並非普通的名)。
無
可以用來表述天地渾沌未開之際的狀況;而==有==,則是宇宙萬物產生之本原的命名。因此,要常從無
中去觀察領悟道的奧妙;要常從==有==中去觀察體會道的端倪。無與有這兩者,來源相同而名稱相異,都可以稱之為玄妙、深遠。它不是一般的玄妙、深奧,而是玄妙又玄妙、深遠又深遠,是宇宙天地萬物之奧妙的總門(從「有名」的奧妙到達無形的奧妙,道是洞悉一切奧妙變化的門徑)。-
习题编号。默认为日文。选择习题
.choices→.choices_part/.c4/.c2
- 题干
- 选项 A
- 选项 B
- 选项 C
- 选项 D
- 题干
- 选项 A
- 选项 B
- 选项 C
- 选项 D
- 题干
- 选项 A
- 选项 B
- 选项 C
- 选项 D
- 题干
- 选项 A
- 选项 B
- 选项 C
- 选项 D
- 题干
-
和表格样式相关表格样式
.nopadding/.nopad/.noborder/.sfont/.lbtable
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 1 | 单元格 2 | 单元格 3 |
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 1 | 单元格 2 | 单元格 3 |
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 1 | 单元格 2 | 单元格 3 |
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 1 | 单元格 2 | 单元格 3 |
Footnotes
-
Hi! This is a footnote ↩