Deploying to gh-pages from @ fdd2ee71e7
🚀
@ -1,245 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.el-message__icon {
|
||||
display: none
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 60px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.web-title {
|
||||
margin: 0 15px 0 5px;
|
||||
}
|
||||
|
||||
.web-icon {
|
||||
width: auto;
|
||||
height: 1.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#editor {
|
||||
height: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.ctrl {
|
||||
flex-basis: 60px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preview-wrapper {
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hint {
|
||||
opacity: 0.6;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.preview {
|
||||
margin: 0 -20px;
|
||||
width: 375px;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preview table {
|
||||
margin-bottom: 10px;
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/*
|
||||
.preview table tr:nth-child(even){
|
||||
background: rgb(250, 250, 250);
|
||||
}
|
||||
*/
|
||||
.select-item-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.select-item-right {
|
||||
float: right;
|
||||
color: #8492a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
height: 100% !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
width: 100% !important;
|
||||
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important;
|
||||
}
|
||||
|
||||
/* ele ui */
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.el-tooltip {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*wechat code block*/
|
||||
.rich_media_content .code-snippet *,
|
||||
.rich_media_content .code-snippet__fix * {
|
||||
max-width: 1000% !important;
|
||||
}
|
||||
|
||||
.code-snippet__fix {
|
||||
word-wrap: break-word !important;
|
||||
font-size: 14px;
|
||||
margin: 10px 8px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
background-color: rgb(238, 238, 238);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.code-snippet__fix .code-snippet__line-index {
|
||||
counter-reset: line;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.code-snippet__fix .code-snippet__line-index li {
|
||||
list-style-type: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.code-snippet__fix .code-snippet__line-index li::before {
|
||||
min-width: 1.5em;
|
||||
text-align: right;
|
||||
left: -2.5em;
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
display: inline;
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.code-snippet__fix pre {
|
||||
overflow-x: auto;
|
||||
padding: 1em 1em 1em 1em;
|
||||
white-space: normal;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.code-snippet__fix code {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
white-space: pre;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 6px;
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
background-color: rgba(144, 146, 152, 0.5);
|
||||
transition: background-color .3s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 146, 152, 0.5);
|
||||
}
|
||||
|
||||
.CodeMirror-vscrollbar:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll,
|
||||
.preview-wrapper {
|
||||
overflow: unset;
|
||||
overflow-y: scroll;
|
||||
}
|
@ -1,47 +0,0 @@
|
||||
.loading {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 99999;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.loading_night {
|
||||
background-color: #303133;
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
line-height: 1.4;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.loading-anim {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: 5px solid rgba(189, 189, 189, 0.25);
|
||||
border-left-color: rgba(66, 185, 131, 0.9);
|
||||
border-top-color: rgba(66, 185, 131, 0.9);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: rotate 600ms infinite linear;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to {
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
@ -1,124 +0,0 @@
|
||||
/*
|
||||
|
||||
Name: Base16 Default Light
|
||||
Author: Chris Kempson (http://chriskempson.com)
|
||||
|
||||
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
|
||||
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
|
||||
|
||||
*/
|
||||
|
||||
.cm-s-style-mirror.CodeMirror {
|
||||
background: #f5f5f5;
|
||||
color: #444;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror div.CodeMirror-selected {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-line::selection,
|
||||
.cm-s-style-mirror .CodeMirror-line>span::selection,
|
||||
.cm-s-style-mirror .CodeMirror-line>span>span::selection {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-line::-moz-selection,
|
||||
.cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
|
||||
.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-gutters {
|
||||
background: #f5f5f5;
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-guttermarker {
|
||||
color: #ac4142;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-guttermarker-subtle {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-linenumber {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-cursor {
|
||||
border-left: 1px solid #505050;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-comment {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-atom {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-number {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-property,
|
||||
.cm-s-style-mirror span.cm-attribute {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-keyword {
|
||||
color: #023a52;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-string {
|
||||
color: #e46918;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-variable {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-variable-2 {
|
||||
color: #00695f;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-variable-3 {
|
||||
color: #2e6e8a;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-def {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-bracket {
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-tag {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-link {
|
||||
color: #b26a00;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror span.cm-error {
|
||||
/* background: #ac4142;
|
||||
color: #f5f5f5; */
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: #df8d8e;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-activeline-background {
|
||||
background: #dddcdc;
|
||||
}
|
||||
|
||||
.cm-s-style-mirror .CodeMirror-matchingbracket {
|
||||
color: rgb(32, 32, 32) !important;
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
Before Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 2.5 MiB |
Before Width: | Height: | Size: 852 KiB |
Before Width: | Height: | Size: 1.6 MiB |
Before Width: | Height: | Size: 190 KiB |
Before Width: | Height: | Size: 67 KiB |
Before Width: | Height: | Size: 51 KiB |
Before Width: | Height: | Size: 1.4 MiB |
Before Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 70 KiB |
@ -1,99 +0,0 @@
|
||||
const DEFAULT_CONTENT =
|
||||
`# 示例文章:Google 搜索的即时自动补全功能究竟是如何“工作”的?
|
||||
> Google 搜索**自动补全功能**的强大,相信不少朋友都能感受到,它帮助我们更快地“补全”我们所要输入的搜索关键字。那么,它怎么知道我们要输入什么内容?它又是如何工作的?在这篇文章里,我们一起来看看。
|
||||
|
||||
## 使用自动补全
|
||||
Google 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用,包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用,我们只需要在 Google 搜索框上开始键入关键字,就可以看到联想词了。
|
||||
|
||||
![](https://imgkr.cn-bj.ufileos.com/17ed83bf-e028-4db2-9503-5a3b4e64deee.gif)
|
||||
|
||||
在上图示例中,我们可以看到,输入关键字 \`juej\`,Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等,好处就是,我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。
|
||||
|
||||
谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用,用户可以轻松在难以键入的小屏幕上完成搜索。当然,对于移动设备用户和台式机用户而言,这都节省了大量的时间。根据 Google 官方报告,自动补全功能可以减少大约 25% 的打字,累积起来,预计每天可以节省 200 多年的打字时间。是的,每天!
|
||||
|
||||
> 注意,本文所提到的“**联想词**”与“**预测**”,是同一个意思。
|
||||
|
||||
## 基于“预测”而非“建议”
|
||||
Google 官方将自动补全功能称之为“预测”,而不是“建议”,为什么呢?其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**,而不是建议用户要执行什么搜索。
|
||||
|
||||
那么,Google 是如何确定这些“预测”的?其实,Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说,哪个热门、哪个搜索频率高,就更可能推给我们。当然,这也与我们当前所处的位置以及我们的搜索历史相关。
|
||||
|
||||
另外,这些“预测”也会随着我们键入的关键字的变更而更改。例如,当我们把键入的关键字从 \`juej\` 更改为 \`juex\` 时,与“掘金”相关的预测会“消失”,同时,与“觉醒”、“决心”相关联的词会出现。
|
||||
|
||||
![](https://imgkr.cn-bj.ufileos.com/5b17dc99-606d-42c1-9f86-e09e88aaa822.gif)
|
||||
|
||||
## 为什么看不到某些联想词?
|
||||
如果我们在输入某个关键字时看不到联想词,那么表明 Google 的算法可能检测到:
|
||||
|
||||
- 这个关键字不是热门字词;
|
||||
- 搜索的字词太新了,我们可能需要等待几天或几周才能看到联想词;
|
||||
- 这是一个侮辱性或敏感字词,这个搜索字词违反了 Google 的相关政策。更加详细的情况,可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。
|
||||
|
||||
## 为什么会看到某些不当的联想词?
|
||||
Google 拥有专门设计的系统,可以自动捕获不适当的预测结果而不显示出来。然而,Google 每天需要处理数十亿次搜索,这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统,也可能存在缺陷,不正确的预测也可能随时会出现。
|
||||
|
||||
我们作为 Google 搜索的用户,如果认定某条预测违反了相关的搜索自动补全政策,可以进行举报反馈,点击右下角“**举报不当的联想查询**”并勾选相关选项即可。
|
||||
|
||||
![](https://imgkr.cn-bj.ufileos.com/6ca8185d-12c6-4550-bb4e-e49cfbf56db7.gif)
|
||||
|
||||
## 如何实现自动补全算法?
|
||||
目前,Google 官方似乎并没有公开搜索自动补全的算法实现,但是业界在这方面已经有了不少研究。
|
||||
|
||||
一个好的自动补全器必须是快速的,并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数,它接受输入的前缀,并搜索以给定前缀开头的词汇或语句列表**。通常来说,只需要返回少量的数目即可。
|
||||
|
||||
接下来,我们先从一个简单且低效的实现开始,并在此基础上逐步构建更高效的方法。
|
||||
|
||||
### 词汇表实现
|
||||
一个**简单粗暴的实现方式**是:顺序查找词汇表,依次检查每个词汇,看它是否以给定的前缀开头。
|
||||
|
||||
但是,此方法需要将前缀与每个词汇进行匹配检查,若词汇量较少,这种方式可能勉强行得通。但是,如果词汇量规模较大,效率就太低了。
|
||||
|
||||
一个**更好的实现方式是**:让词汇按字典顺序排序。借助二分搜索算法,可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半,因此,总的搜索时间与词汇表中单词数量的对数成正比,即时间复杂度是 \`O(log N)\`。二分搜索的性能很好,但有没有更好的实现呢?当然有,往下看。
|
||||
|
||||
### 前缀树实现
|
||||
通常来说,许多词汇都以相同的前缀开头,比如 \`need\`、\`nested\` 都以 \`ne\` 开头,\`seed\`、\`speed\` 都以 \`s\` 开头。要是为每个单词分别存储公共前缀似乎很浪费。
|
||||
|
||||
![](https://imgkr.cn-bj.ufileos.com/7cc3cf37-040a-420e-8ef9-d05e92c82cfd.png)
|
||||
|
||||
前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词,单词沿着从根节点到叶子节点的路径存储,树的层次对应于前缀的字母位置。
|
||||
|
||||
前缀的补全是顺着前缀定义的路径来查找的。例如,在上图的前缀树中,前缀 \`ne\` 对应于从子节点取左边缘 \`N\` 和唯一边缘 \`E\` 的路径。然后可以通过继续遍历从 \`E\` 节点可以达到的所有叶节点来生成补全列表。在图中,\`ne\` 的补全可以是两个分支:\`-ed\` 和 \`-sted\`。如果在数中找不到由前缀定义的路径,则说明词汇表中不包含以该前缀开头的单词。
|
||||
|
||||
### 有限状态自动机(DFA)实现
|
||||
前缀树可以有效处理公共前缀,但是,对于其他共享词部分,仍会分别存储在每个分支中。比如,后缀 \`ed\`、\`ing\`、\`tion\` 在英文单词中特别常见。在上一个例子中,\`e\`、\`d\` 分别存放在了每一个分支上。
|
||||
|
||||
有没有一种方法可以更加节省存储空间呢?有的,那就是 DFA。
|
||||
|
||||
<center>
|
||||
<img src="https://imgkr.cn-bj.ufileos.com/02bc143e-e1a7-4b3c-bd5d-8d6d39139f0a.png" style="width: 50%;"></center>
|
||||
|
||||
在上面的例子中,单词 \`need\`、\`nested\`、\`seed\` 和 \`speed\` 仅由 9 个节点组成,而上一张图中的前缀树包含了 17 个节点。
|
||||
|
||||
可以看出,最小化前缀树 DFA 可以在很大程度上减少数据结构的大小。即使词汇量很大,最小化 DFA 通常也适合在内存中存储,避免昂贵的磁盘访问是实现快速自动补全的关键。
|
||||
|
||||
### 一些扩展
|
||||
上面介绍了如何利用合理的数据结构实现基本的自动补全功能。这些数据结构可以通过多种方式进行扩展,从而改善用户体验。
|
||||
|
||||
通常,满足特定前缀的词汇可能很多,而用户界面上能够显示的却不多,我们更希望能显示最常搜索或者最有价值的词汇。这通常可以通过为词汇表中的每个单词增加一个代表单词值的**权重** \`weight\`,并且按照权重高低来排序自动补全列表。
|
||||
|
||||
- 对于排序后的词汇表来说,在词汇表每个元素上增加 \`weight\` 属性并不难;
|
||||
- 对于前缀树来说,将 \`weight\` 存储在叶子节点中,也是很简单的一个实现;
|
||||
- 对于 \`DFA\` 来说,则较为复杂。因为一个叶子节点可以通过多条路径到达。一种解决方案是将权重关联到路径而不是叶子节点。
|
||||
|
||||
目前有不少开源库都提供了这个功能,比如主流的搜索引擎框架 [Elasticsearch](https://www.elastic.co/products/elasticsearch)、[Solr](https://lucene.apache.org/solr/) 等,基于此,我们可以实现高效而强大的自动补全功能。
|
||||
|
||||
#### 推荐阅读
|
||||
- [阿里又一个 20k+ stars 开源项目诞生,恭喜 fastjson!](https://mp.weixin.qq.com/s/RNKDCK2KoyeuMeEs6GUrow)
|
||||
- [刷掉 90% 候选人的互联网大厂海量数据面试题(附题解 + 方法总结)](https://mp.weixin.qq.com/s/rjGqxUvrEqJNlo09GrT1Dw)
|
||||
- [好用!期待已久的文本块功能究竟如何在 Java 13 中发挥作用?](https://mp.weixin.qq.com/s/kalGv5T8AZGxTnLHr2wDsA)
|
||||
- [2019 GitHub 开源贡献排行榜新鲜出炉!微软谷歌领头,阿里跻身前 12!](https://mp.weixin.qq.com/s/_q812aGD1b9QvZ2WFI0Qgw)
|
||||
|
||||
---
|
||||
|
||||
欢迎关注我的公众号“**Doocs开源社区**”,原创技术文章第一时间推送。
|
||||
|
||||
<center>
|
||||
<img src="https://imgkr.cn-bj.ufileos.com/1092dc45-e817-4bb0-82b0-2b2b4826ccf2.gif" style="width: 100px;">
|
||||
</center>
|
||||
|
||||
`
|
@ -1,190 +0,0 @@
|
||||
let WxRenderer = function (opts) {
|
||||
this.opts = opts;
|
||||
let ENV_STRETCH_IMAGE = true;
|
||||
|
||||
let footnotes = [];
|
||||
let footnoteIndex = 0;
|
||||
let styleMapping = null;
|
||||
|
||||
const CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";
|
||||
|
||||
let merge = (base, extend) => Object.assign({}, base, extend);
|
||||
|
||||
this.buildTheme = themeTpl => {
|
||||
let mapping = {};
|
||||
let base = merge(themeTpl.BASE, {
|
||||
'font-family': this.opts.fonts,
|
||||
'font-size': this.opts.size
|
||||
});
|
||||
let base_block = merge(base, {});
|
||||
for (let ele in themeTpl.inline) {
|
||||
if (themeTpl.inline.hasOwnProperty(ele)) {
|
||||
let style = themeTpl.inline[ele];
|
||||
if (ele === 'codespan') {
|
||||
style['font-family'] = CODE_FONT_FAMILY;
|
||||
style['white-space'] = 'normal';
|
||||
}
|
||||
mapping[ele] = merge(base, style);
|
||||
}
|
||||
}
|
||||
|
||||
for (let ele in themeTpl.block) {
|
||||
if (themeTpl.block.hasOwnProperty(ele)) {
|
||||
let style = themeTpl.block[ele];
|
||||
if (ele === 'code') {
|
||||
style['font-family'] = CODE_FONT_FAMILY;
|
||||
}
|
||||
mapping[ele] = merge(base_block, style);
|
||||
}
|
||||
}
|
||||
return mapping;
|
||||
};
|
||||
|
||||
let getStyles = (tokenName, addition) => {
|
||||
let arr = [];
|
||||
let dict = styleMapping[tokenName];
|
||||
if (!dict) return '';
|
||||
for (const key in dict) {
|
||||
arr.push(key + ':' + dict[key]);
|
||||
}
|
||||
return `style="${arr.join(';') + (addition || '')}"`;
|
||||
};
|
||||
|
||||
let addFootnote = (title, link) => {
|
||||
footnotes.push([++footnoteIndex, title, link]);
|
||||
return footnoteIndex;
|
||||
};
|
||||
|
||||
this.buildFootnotes = () => {
|
||||
let footnoteArray = footnotes.map(x => {
|
||||
if (x[1] === x[2]) {
|
||||
return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
|
||||
}
|
||||
return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
|
||||
});
|
||||
return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`;
|
||||
};
|
||||
|
||||
this.buildAddition = () => {
|
||||
return `
|
||||
<style>
|
||||
.preview-wrapper pre::before {
|
||||
font-family: "SourceSansPro", "HelveticaNeue", Arial, sans-serif;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding: 5px 10px 0;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
|
||||
this.setOptions = newOpts => {
|
||||
this.opts = merge(this.opts, newOpts);
|
||||
};
|
||||
|
||||
this.hasFootnotes = () => footnotes.length !== 0;
|
||||
|
||||
this.getRenderer = (status) => {
|
||||
footnotes = [];
|
||||
footnoteIndex = 0;
|
||||
|
||||
styleMapping = this.buildTheme(this.opts.theme);
|
||||
let renderer = new marked.Renderer();
|
||||
|
||||
renderer.heading = (text, level) => {
|
||||
switch (level) {
|
||||
case 1:
|
||||
return `<h1 ${getStyles('h1')}>${text}</h1>`;
|
||||
case 2:
|
||||
return `<h2 ${getStyles('h2')}>${text}</h2>`;
|
||||
case 3:
|
||||
return `<h3 ${getStyles('h3')}>${text}</h3>`;
|
||||
default:
|
||||
return `<h4 ${getStyles('h4')}>${text}</h4>`;
|
||||
}
|
||||
};
|
||||
renderer.paragraph = text => `<p ${getStyles('p')}>${text}</p>`;
|
||||
|
||||
renderer.blockquote = text => {
|
||||
text = text.replace(/<p.*?>/, `<p ${getStyles('blockquote_p')}>`);
|
||||
return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`;
|
||||
};
|
||||
renderer.code = (text, infoString) => {
|
||||
text = text.replace(/</g, "<");
|
||||
text = text.replace(/>/g, ">");
|
||||
|
||||
let lines = text.split('\n');
|
||||
let codeLines = [];
|
||||
let numbers = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
codeLines.push(`<code class="prettyprint"><span class="code-snippet_outer">${(line || '<br>')}</span></code>`);
|
||||
numbers.push('<li></li>');
|
||||
}
|
||||
let lang = infoString || '';
|
||||
|
||||
return `
|
||||
<section class="code-snippet__fix code-snippet__js">
|
||||
<ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
|
||||
<pre class="code-snippet__js" data-lang="${lang}">
|
||||
${codeLines.join('')}
|
||||
</pre>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
renderer.codespan = (text, infoString) => `<code ${getStyles('codespan')}>${text}</code>`;
|
||||
renderer.listitem = text => `<span ${getStyles('listitem')}><span style="margin-right: 10px;"><%s/></span>${text}</span>`;
|
||||
|
||||
renderer.list = (text, ordered, start) => {
|
||||
text = text.replace(/<\/*p.*?>/g, '');
|
||||
let segments = text.split(`<%s/>`);
|
||||
if (!ordered) {
|
||||
text = segments.join('•');
|
||||
return `<p ${getStyles('ul')}>${text}</p>`;
|
||||
}
|
||||
text = segments[0];
|
||||
for (let i = 1; i < segments.length; i++) {
|
||||
text = text + i + '.' + segments[i];
|
||||
}
|
||||
return `<p ${getStyles('ol')}>${text}</p>`;
|
||||
};
|
||||
renderer.image = (href, title, text) => {
|
||||
let subText = '';
|
||||
if (text) {
|
||||
subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`;
|
||||
}
|
||||
let figureStyles = getStyles('figure');
|
||||
let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org');
|
||||
return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
|
||||
};
|
||||
renderer.link = (href, title, text) => {
|
||||
if (href.indexOf('https://mp.weixin.qq.com') === 0) {
|
||||
return `<a href="${href}" title="${(title || text)}" ${getStyles('wx_link')}>${text}</a>`;
|
||||
} else if (href === text) {
|
||||
return text;
|
||||
} else {
|
||||
if (status) {
|
||||
let ref = addFootnote(title || text, href);
|
||||
return `<span ${getStyles('link')}>${text}<sup>[${ref}]</sup></span>`;
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
};
|
||||
renderer.strong = text => `<strong ${getStyles('strong')}>${text}</strong>`;
|
||||
renderer.em = text => `<p ${getStyles('p', ';font-style: italic;')}>${text}</p>`;
|
||||
renderer.table = (header, body) => `<section style="padding:0 8px;"><table class="preview-table"><thead ${getStyles('thead')}>${header}</thead><tbody>${body}</tbody></table></section>`;
|
||||
// renderer.tablerow = (text) => `<tr style="">${text}</tr>`;
|
||||
renderer.tablecell = (text, flags) => `<td ${getStyles('td')}>${text}</td>`;
|
||||
renderer.hr = () => `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
|
||||
return renderer;
|
||||
}
|
||||
};
|
@ -1,41 +0,0 @@
|
||||
const DEFAULT_CSS_CONTENT =
|
||||
`/*
|
||||
按Ctrl+F可格式化
|
||||
*/
|
||||
/* 一级标题样式 */
|
||||
h1 {
|
||||
}
|
||||
/* 二级标题样式 */
|
||||
h2 {
|
||||
}
|
||||
/* 三级标题样式 */
|
||||
h3 {
|
||||
}
|
||||
/* 四级标题样式 */
|
||||
h4 {
|
||||
}
|
||||
/* 图片样式 */
|
||||
image {
|
||||
}
|
||||
/* 引用样式 */
|
||||
blockquote {
|
||||
}
|
||||
/* 引用段落样式 */
|
||||
blockquote_p {
|
||||
}
|
||||
/* 段落样式 */
|
||||
p {
|
||||
}
|
||||
/* 行内代码样式 */
|
||||
codespan {
|
||||
}
|
||||
/* 粗体样式 */
|
||||
strong {
|
||||
}
|
||||
/* 链接样式 */
|
||||
link {
|
||||
}
|
||||
/* 微信链接样式 */
|
||||
wx_link {
|
||||
}
|
||||
`
|
@ -1,177 +0,0 @@
|
||||
export const default_theme = {
|
||||
BASE: {
|
||||
'text-align': 'left',
|
||||
'color': '#3f3f3f',
|
||||
'line-height': '1.75'
|
||||
},
|
||||
BASE_BLOCK: {
|
||||
'margin': '1em 8px'
|
||||
},
|
||||
block: {
|
||||
// 一级标题样式
|
||||
h1: {
|
||||
'font-size': '1.2em',
|
||||
'text-align': 'center',
|
||||
'font-weight': 'bold',
|
||||
'display': 'table',
|
||||
'margin': '2em auto 1em',
|
||||
'padding': '0 1em',
|
||||
'border-bottom': '2px solid rgba(0, 152, 116, 0.9)'
|
||||
},
|
||||
|
||||
// 二级标题样式
|
||||
h2: {
|
||||
'font-size': '1.2em',
|
||||
'text-align': 'center',
|
||||
'font-weight': 'bold',
|
||||
'display': 'table',
|
||||
'margin': '4em auto 2em',
|
||||
'padding': '0 0.2em',
|
||||
'background': 'rgba(0, 152, 116, 0.9)',
|
||||
'color': '#fff'
|
||||
},
|
||||
|
||||
// 三级标题样式
|
||||
h3: {
|
||||
'font-weight': 'bold',
|
||||
'font-size': '1.1em',
|
||||
'margin': '2em 8px 0.75em 0',
|
||||
'line-height': '1.2',
|
||||
'padding-left': '8px',
|
||||
'border-left': '3px solid rgba(0, 152, 116, 0.9)'
|
||||
},
|
||||
|
||||
// 四级标题样式
|
||||
h4: {
|
||||
'font-weight': 'bold',
|
||||
'font-size': '1em',
|
||||
'margin': '2em 8px 0.5em',
|
||||
'color': 'rgba(66, 185, 131, 0.9)'
|
||||
},
|
||||
|
||||
// 段落样式
|
||||
p: {
|
||||
'margin': '1.5em 8px',
|
||||
'letter-spacing': '0.1em'
|
||||
},
|
||||
|
||||
// 引用样式
|
||||
blockquote: {
|
||||
'font-style': 'normal',
|
||||
'border-left': 'none',
|
||||
'padding': '1em',
|
||||
'border-radius': '4px',
|
||||
'color': '#FEEEED',
|
||||
'background': 'rgba(27,31,35,.05)',
|
||||
'margin': '2em 8px'
|
||||
},
|
||||
|
||||
blockquote_p: {
|
||||
'letter-spacing': '0.1em',
|
||||
'color': 'rgb(80, 80, 80)',
|
||||
'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
|
||||
'font-size': '1em',
|
||||
'display': 'inline'
|
||||
},
|
||||
|
||||
code: {
|
||||
'font-size': '80%',
|
||||
'overflow': 'auto',
|
||||
'color': '#333',
|
||||
'background': 'rgb(247, 247, 247)',
|
||||
'border-radius': '2px',
|
||||
'padding': '10px',
|
||||
'line-height': '1.5',
|
||||
'border': '1px solid rgb(236,236,236)',
|
||||
'margin': '20px 0'
|
||||
},
|
||||
|
||||
image: {
|
||||
'border-radius': '4px',
|
||||
'display': 'block',
|
||||
'margin': '0.1em auto 0.5em',
|
||||
'width': '100% !important'
|
||||
},
|
||||
|
||||
image_org: {
|
||||
'border-radius': '4px',
|
||||
'display': 'block'
|
||||
},
|
||||
|
||||
ol: {
|
||||
'margin-left': '0',
|
||||
'padding-left': '1em'
|
||||
},
|
||||
|
||||
ul: {
|
||||
'margin-left': '0',
|
||||
'padding-left': '1em',
|
||||
'list-style': 'circle'
|
||||
},
|
||||
|
||||
footnotes: {
|
||||
'margin': '0.5em 8px',
|
||||
'font-size': '80%'
|
||||
},
|
||||
|
||||
figure: {
|
||||
'margin': '1.5em 8px'
|
||||
}
|
||||
},
|
||||
inline: {
|
||||
listitem: {
|
||||
'text-indent': '-1em',
|
||||
'display': 'block',
|
||||
'margin': '0.2em 8px'
|
||||
},
|
||||
|
||||
codespan: {
|
||||
'font-size': '90%',
|
||||
'color': '#d14',
|
||||
'background': 'rgba(27,31,35,.05)',
|
||||
'padding': '3px 5px',
|
||||
'border-radius': '4px'
|
||||
},
|
||||
|
||||
link: {
|
||||
'color': '#576b95'
|
||||
},
|
||||
|
||||
wx_link: {
|
||||
'color': '#576b95',
|
||||
'text-decoration': 'none'
|
||||
},
|
||||
|
||||
// 字体加粗样式
|
||||
strong: {
|
||||
'color': 'rgba(15, 76, 129, 0.9)',
|
||||
'font-weight': 'bold'
|
||||
},
|
||||
|
||||
table: {
|
||||
'border-collapse': 'collapse',
|
||||
'text-align': 'center',
|
||||
'margin': '1em 8px'
|
||||
},
|
||||
|
||||
thead: {
|
||||
'background': 'rgba(0, 0, 0, 0.05)',
|
||||
'font-weight': 'bold'
|
||||
},
|
||||
|
||||
td: {
|
||||
'border': '1px solid #dfdfdf',
|
||||
'padding': '0.25em 0.5em'
|
||||
},
|
||||
|
||||
footnote: {
|
||||
'font-size': '12px'
|
||||
},
|
||||
|
||||
figcaption: {
|
||||
'text-align': 'center',
|
||||
'color': '#888',
|
||||
'font-size': '0.8em'
|
||||
}
|
||||
}
|
||||
}
|
@ -1,143 +0,0 @@
|
||||
// 设置自定义颜色
|
||||
function setColorWithTemplate(template) {
|
||||
return function (color) {
|
||||
let custom_theme = JSON.parse(JSON.stringify(template));
|
||||
custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
|
||||
custom_theme.block.h2['background'] = color;
|
||||
custom_theme.block.h3['border-left'] = `3px solid ${color}`;
|
||||
custom_theme.block.h4['color'] = color;
|
||||
custom_theme.inline.strong['color'] = color;
|
||||
return custom_theme;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
let setColorWithCustomTemplate = function setColorWithCustomTemplate(template, color) {
|
||||
let custom_theme = JSON.parse(JSON.stringify(template));
|
||||
custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
|
||||
custom_theme.block.h2['background'] = color;
|
||||
custom_theme.block.h3['border-left'] = `3px solid ${color}`;
|
||||
custom_theme.block.h4['color'] = color;
|
||||
custom_theme.inline.strong['color'] = color;
|
||||
return custom_theme;
|
||||
}
|
||||
|
||||
// 设置自定义字体大小
|
||||
function setFontSizeWithTemplate(template) {
|
||||
return function (fontSize) {
|
||||
let custom_theme = JSON.parse(JSON.stringify(template));
|
||||
custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px`;
|
||||
custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px`;
|
||||
custom_theme.block.h3['font-size'] = `${fontSize}px`;
|
||||
custom_theme.block.h4['font-size'] = `${fontSize}px`;
|
||||
return custom_theme;
|
||||
}
|
||||
}
|
||||
|
||||
let setColor = setColorWithTemplate(default_theme);
|
||||
let setFontSize = setFontSizeWithTemplate(default_theme);
|
||||
|
||||
function customCssWithTemplate(jsonString, color, theme) {
|
||||
let custom_theme = JSON.parse(JSON.stringify(theme));
|
||||
// block
|
||||
custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
|
||||
custom_theme.block.h2['background'] = color;
|
||||
custom_theme.block.h3['border-left'] = `3px solid ${color}`;
|
||||
custom_theme.block.h4['color'] = color;
|
||||
custom_theme.inline.strong['color'] = color;
|
||||
|
||||
custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
|
||||
custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
|
||||
custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
|
||||
custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
|
||||
custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
|
||||
custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote, jsonString.blockquote);
|
||||
custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p, jsonString.blockquote_p);
|
||||
custom_theme.block.image = Object.assign(custom_theme.block.image, jsonString.image);
|
||||
|
||||
// inline
|
||||
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
|
||||
custom_theme.inline.codespan = Object.assign(custom_theme.inline.codespan, jsonString.codespan);
|
||||
custom_theme.inline.link = Object.assign(custom_theme.inline.link, jsonString.link);
|
||||
custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link, jsonString.wx_link);
|
||||
|
||||
return custom_theme;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 将CSS形式的字符串转换为JSON
|
||||
*
|
||||
* @param {css字符串} css
|
||||
*/
|
||||
function css2json(css) {
|
||||
|
||||
// 移除CSS所有注释
|
||||
while ((open = css.indexOf("/*")) !== -1 &&
|
||||
(close = css.indexOf("*/")) !== -1) {
|
||||
css = css.substring(0, open) + css.substring(close + 2);
|
||||
}
|
||||
|
||||
// 初始化返回值
|
||||
let json = {};
|
||||
|
||||
while (css.length > 0 && (css.indexOf('{') !== -1) && (css.indexOf('}') !== -1)) {
|
||||
// 存储第一个左/右花括号的下标
|
||||
const lbracket = css.indexOf('{');
|
||||
const rbracket = css.indexOf('}');
|
||||
|
||||
// 第一步:将声明转换为Object,如:
|
||||
// `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;`
|
||||
// ==>
|
||||
// `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
|
||||
|
||||
// 辅助方法:将array转为object
|
||||
function toObject(array) {
|
||||
let ret = {};
|
||||
array.forEach(e => {
|
||||
const index = e.indexOf(':');
|
||||
const property = e.substring(0, index).trim();
|
||||
const value = e.substring(index + 1).trim();
|
||||
ret[property] = value;
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
// 切割声明块并移除空白符,然后放入数组中
|
||||
let declarations = css.substring(lbracket + 1, rbracket)
|
||||
.split(";")
|
||||
.map(e => e.trim())
|
||||
.filter(e => e.length > 0); // 移除所有""空值
|
||||
|
||||
// 转为Object对象
|
||||
declarations = toObject(declarations);
|
||||
|
||||
|
||||
|
||||
// 第二步:选择器处理,每个选择器会与它对应的声明相关联,如:
|
||||
// `h1, p#bar {color: red}`
|
||||
// ==>
|
||||
// {"h1": {color: red}, "p#bar": {color: red}}
|
||||
|
||||
let selectors = css.substring(0, lbracket)
|
||||
// 以,切割,并移除空格:`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"]
|
||||
.split(",")
|
||||
.map(selector => selector.trim());
|
||||
|
||||
// 迭代赋值
|
||||
selectors.forEach(selector => {
|
||||
// 若不存在,则先初始化
|
||||
if (!json[selector]) json[selector] = {};
|
||||
// 赋值到JSON
|
||||
Object.keys(declarations).forEach(key => {
|
||||
json[selector][key] = declarations[key];
|
||||
});
|
||||
});
|
||||
|
||||
// 继续下个声明块
|
||||
css = css.slice(rbracket + 1).trim();
|
||||
}
|
||||
|
||||
// 返回JSON形式的结果串
|
||||
return json;
|
||||
}
|
@ -1 +0,0 @@
|
||||
.editor__header[data-v-257e3ffe]{width:100%}.header__item[data-v-257e3ffe]{margin:0 3px}.header__item_last[data-v-257e3ffe]{margin-right:8px}.header__switch[data-v-257e3ffe]{margin-left:8px}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}.main-body[data-v-5477ed6d]{padding-top:0}
|
@ -1 +0,0 @@
|
||||
.editor__header[data-v-257e3ffe]{width:100%}.header__item[data-v-257e3ffe]{margin:0 3px}.header__item_last[data-v-257e3ffe]{margin-right:8px}.header__switch[data-v-257e3ffe]{margin-left:8px}.main-body[data-v-a0bd6f2e]{padding-top:0}
|
@ -1 +0,0 @@
|
||||
.editor__header[data-v-2386b67c]{width:100%}.header__item[data-v-2386b67c]{margin:0 3px}.header__item_last[data-v-2386b67c]{margin-right:8px}.header__switch[data-v-2386b67c]{margin-left:8px}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}.main-body[data-v-6f5b327c]{padding-top:0}
|
@ -1 +0,0 @@
|
||||
.editor__header[data-v-3dab64ea]{width:100%}.header__item[data-v-3dab64ea]{margin:0 3px}.header__item_last[data-v-3dab64ea]{margin-right:8px}.header__switch[data-v-3dab64ea]{margin-left:8px}.mode__switch[data-v-3dab64ea]{margin-left:24px;width:24px;height:24px;background:url(../img/night.8bc3a963.png) no-repeat;background-size:cover;-webkit-transition:all .3s;transition:all .3s}.mode__switch_black[data-v-3dab64ea]{background:url(../img/light.f7a977db.png) no-repeat;background-size:cover}.top[data-v-3dab64ea]{margin-right:0}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}.main-body[data-v-411eecb8]{padding-top:12px;overflow:hidden}.el-main[data-v-411eecb8]{padding:0;margin:20px}.container[data-v-411eecb8],.el-main[data-v-411eecb8]{-webkit-transition:all .3s;transition:all .3s}.container_night,.container_night .el-main{background-color:#333}.container_night .CodeMirror{caret-color:grey;color:grey;background-color:#1e1e1e;-webkit-box-shadow:inset 0 0 0 1px rgba(100,37,37,.102);box-shadow:inset 0 0 0 1px rgba(100,37,37,.102)}.container_night .preview{background-color:#1e1e1e;-webkit-box-shadow:0 0 70px rgba(0,0,0,.3);box-shadow:0 0 70px rgba(0,0,0,.3)}.container_night .preview-wrapper{background-color:#1e1e1e;-webkit-box-shadow:inset 0 0 0 1px hsla(0,4.3%,91%,.102);box-shadow:inset 0 0 0 1px hsla(0,4.3%,91%,.102)}.container_night .cm-s-style-mirror .CodeMirror-matchingbracket{color:#fff!important;background:#1e1e1e!important}.container_night .cm-s-style-mirror span.cm-tag,.container_night .cm-s-xq-light span.cm-variable-2{color:grey}.container_night .cm-s-xq-light .CodeMirror-activeline-background{background-color:transparent}.container_night .cm-s-xq-light span.cm-string{color:#8e9eb9}.container_night .cm-s-xq-light span.cm-link{color:#84868b}.container_night .editor__header{background-color:#3c3c3c}.container_night .el-button{color:#fff;background-color:#1e1e1e;border:1px solid transparent}.container_night .el-button.is-plain:focus,.container_night .el-button.is-plain:hover{background:#1e1e1e;color:#fff;border:1px solid #fff}.container_night .el-button.is-plain:focus i,.container_night .el-button.is-plain:hover i{color:#fff}.container_night .about__dialog .el-dialog,.container_night .insert__dialog .el-dialog{background-color:#333}.container_night .about__dialog .el-dialog__body,.container_night .about__dialog .el-dialog__title,.container_night .about__dialog .el-form-item__label,.container_night .insert__dialog .el-dialog__body,.container_night .insert__dialog .el-dialog__title,.container_night .insert__dialog .el-form-item__label,.container_night i{color:#fff}.container_night ::-webkit-scrollbar{background-color:#1e1e1e}
|
@ -1 +0,0 @@
|
||||
.editor__header[data-v-2386b67c]{width:100%}.header__item[data-v-2386b67c]{margin:0 3px}.header__item_last[data-v-2386b67c]{margin-right:8px}.header__switch[data-v-2386b67c]{margin-left:8px}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}.main-body[data-v-6ee7d8fa]{padding-top:0}
|
BIN
favicon.ico
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 5.5 KiB |
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=keywords content=md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs><meta name=description content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>微信 Markdown 编辑器</title><link rel="shortcut icon" href=https://gitee.com/yanglbme/resource/raw/master/doocs-md/favicon.png><link rel=apple-touch-icon-precomposed href=https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png><script src=https://cdn.bootcdn.net/ajax/libs/prettify/r224/prettify.min.js></script><link href=/md/css/app.948ccedb.css rel=preload as=style><link href=/md/css/chunk-vendors.3176f487.css rel=preload as=style><link href=/md/js/app.7048ac24.js rel=preload as=script><link href=/md/js/chunk-vendors.5a67f0a2.js rel=preload as=script><link href=/md/css/chunk-vendors.3176f487.css rel=stylesheet><link href=/md/css/app.948ccedb.css rel=stylesheet></head><body><div id=app></div><script src=/md/js/chunk-vendors.5a67f0a2.js></script><script src=/md/js/app.7048ac24.js></script></body></html>
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=keywords content=md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs><meta name=description content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>微信 Markdown 编辑器</title><link rel="shortcut icon" href=https://gitee.com/yanglbme/resource/raw/master/doocs-md/favicon.png><link rel=apple-touch-icon-precomposed href=https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png><script src=https://cdn.bootcdn.net/ajax/libs/prettify/r224/prettify.min.js></script><link href=/md/css/app.948ccedb.css rel=preload as=style><link href=/md/css/chunk-vendors.3176f487.css rel=preload as=style><link href=/md/js/app.17967f62.js rel=preload as=script><link href=/md/js/chunk-vendors.5a67f0a2.js rel=preload as=script><link href=/md/css/chunk-vendors.3176f487.css rel=stylesheet><link href=/md/css/app.948ccedb.css rel=stylesheet></head><body><div id=app></div><script src=/md/js/chunk-vendors.5a67f0a2.js></script><script src=/md/js/app.17967f62.js></script></body></html>
|
@ -1,2 +0,0 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
|
||||
//# sourceMappingURL=about.ac56c727.js.map
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["webpack:///./src/views/About.vue?cb06","webpack:///./src/views/About.vue"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","script","component"],"mappings":"8GAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACG,YAAY,SAAS,CAACH,EAAG,KAAK,CAACL,EAAIS,GAAG,+B,YCAtJC,EAAS,GAKTC,EAAY,eACdD,EACAX,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAI,E","file":"js/about.ac56c727.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"about\"},[_c('h1',[_vm._v(\"This is an about page\")])])}]\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./About.vue?vue&type=template&id=1ae8a7be&\"\nvar script = {}\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
|
@ -1,2 +0,0 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
|
||||
//# sourceMappingURL=about.b48c8998.js.map
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["webpack:///./src/views/About.vue?1bb4","webpack:///./src/views/About.vue"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","script","component"],"mappings":"8GAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACG,YAAY,SAAS,CAACH,EAAG,KAAK,CAACL,EAAIS,GAAG,+B,YCAtJC,EAAS,GAKTC,EAAY,eACdD,EACAX,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAI,E","file":"js/about.b48c8998.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"about\"},[_c('h1',[_vm._v(\"This is an about page\")])])}]\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./About.vue?vue&type=template&id=1ae8a7be&\"\nvar script = {}\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
|
@ -1,2 +0,0 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
|
||||
//# sourceMappingURL=about.b795a0e0.js.map
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["webpack:///./src/views/About.vue?7a2a","webpack:///./src/views/About.vue"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","script","component"],"mappings":"8GAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACG,YAAY,SAAS,CAACH,EAAG,KAAK,CAACL,EAAIS,GAAG,+B,YCAtJC,EAAS,GAKTC,EAAY,eACdD,EACAX,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAI,E","file":"js/about.b795a0e0.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"about\"},[_c('h1',[_vm._v(\"This is an about page\")])])}]\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./About.vue?vue&type=template&id=1ae8a7be&\"\nvar script = {}\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
|
@ -1,2 +0,0 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
|
||||
//# sourceMappingURL=about.bc599784.js.map
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["webpack:///./src/views/About.vue?0224","webpack:///./src/views/About.vue"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","script","component"],"mappings":"8GAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACG,YAAY,SAAS,CAACH,EAAG,KAAK,CAACL,EAAIS,GAAG,+B,YCAtJC,EAAS,GAKTC,EAAY,eACdD,EACAX,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAI,E","file":"js/about.bc599784.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"about\"},[_c('h1',[_vm._v(\"This is an about page\")])])}]\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./About.vue?vue&type=template&id=1ae8a7be&\"\nvar script = {}\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
|
@ -1,2 +0,0 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
|
||||
//# sourceMappingURL=about.d8d82908.js.map
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["webpack:///./src/views/About.vue?60da","webpack:///./src/views/About.vue"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","script","component"],"mappings":"8GAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACG,YAAY,SAAS,CAACH,EAAG,KAAK,CAACL,EAAIS,GAAG,+B,YCAtJC,EAAS,GAKTC,EAAY,eACdD,EACAX,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAI,E","file":"js/about.d8d82908.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"about\"},[_c('h1',[_vm._v(\"This is an about page\")])])}]\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./About.vue?vue&type=template&id=1ae8a7be&\"\nvar script = {}\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
|
@ -1,2 +0,0 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
|
||||
//# sourceMappingURL=about.e377d7f4.js.map
|
@ -1 +0,0 @@
|
||||
{"version":3,"sources":["webpack:///./src/views/About.vue?2ab6","webpack:///./src/views/About.vue"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","script","component"],"mappings":"8GAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACG,YAAY,SAAS,CAACH,EAAG,KAAK,CAACL,EAAIS,GAAG,+B,YCAtJC,EAAS,GAKTC,EAAY,eACdD,EACAX,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAI,E","file":"js/about.e377d7f4.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"about\"},[_c('h1',[_vm._v(\"This is an about page\")])])}]\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./About.vue?vue&type=template&id=1ae8a7be&\"\nvar script = {}\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
|