feat: update default-content.md

This commit is contained in:
yanglbme 2019-11-01 17:34:00 +08:00
parent ae774c3ac7
commit 20a8e6fbb1
4 changed files with 22 additions and 73 deletions

View File

@ -1,2 +1,4 @@
# wxmd-editor # Wechat Markdown Editor
Wechat Markdown Editor | 微信 Markdown 编辑器 > Fork from https://github.com/zkqiang/wechat-mdeditor
Visit https://yanglbme.github.io/wxmd-editor/index.html to start writing.

View File

@ -1,14 +1,9 @@
# 公众号 Markdown 编辑器 ## 文章编辑示例
### 简介 ### 简介
一款自动将 Markdown 文章自动渲染成微信公众号文章样式的工具。
这款编辑器可以将 Markdown 转换成微信公众号编辑器的样式,只需将 MD 文档复制到左侧栏,再在右侧栏顶部"点击复制",右侧预览内容就可被复制到公众号后台。
这让你在公众号创作时,把更多的时间专注于文章本身,而不是繁琐地调整文章样式。
### 功能 ### 功能
- 支持序号列表和圆点列表,解决了样式会被重置的问题 - 支持序号列表和圆点列表,解决了样式会被重置的问题
- 外链会自动转换为参考文献索引,并且附在文章末尾 - 外链会自动转换为参考文献索引,并且附在文章末尾
- 支持多种字体和样式 - 支持多种字体和样式
@ -17,76 +12,29 @@
- 支持编辑内容自动保存、预览同步滚动等常见功能 - 支持编辑内容自动保存、预览同步滚动等常见功能
### 关于 Markdown ### 关于 Markdown
1. Markdown 是一种轻量级标记语言,能将文本换成有效的 XHTML(或者HTML) 文档 1. Markdown 是一种轻量级标记语言,能将文本换成有效的 XHTML(或者HTML) 文档
2. Markdown 强大之处,在于可以用一套格式,在所有支持 Markdown 的编辑器中转换成发布样式,做到最大化兼容,不需要担心复制到不同编辑器中样式被破坏 2. Markdown 强大之处,在于可以用一套格式,在所有支持 Markdown 的编辑器中转换成发布样式,做到最大化兼容,不需要担心复制到不同编辑器中样式被破坏
3. 正如你右侧看到的这样Markdown 被转换成了微信支持的样式,同样你可以在一字不改的情况下,在 Github 等平台上转换类似的样式 3. 正如你右侧看到的这样Markdown 被转换成了微信支持的样式,同样你可以在一字不改的情况下,在 Github 等平台上转换类似的样式
4. 学习 Markdown 的语法,可以查看 [Markdown 语法入门手册](https://www.w3cschool.cn/markdownyfsm/markdownyfsm-odm6256r.html) 4. 学习 Markdown 的语法,可以查看 [Markdown 语法入门手册](https://www.w3cschool.cn/markdownyfsm/markdownyfsm-odm6256r.html)
## 更多样式
### 注音符号
[注音符号 W3C 定义](http://www.w3.org/TR/ruby/)。
支持日语注音假名、汉语拼音。
用法有以下几种:
* 世界{せかい}
* 小夜時雨{さ・よ・しぐれ}
* 食べる{たべる}
* 丧心病狂{gàn・de・piào・liang}
### 图片 ### 图片
```
接下来是一张图片。你可以用自己图床,也可以上传到微信媒体库再把图片 URL ![desc](img_url)
粘贴回来,或者编辑好以后,在公众号里插入图片。 ```
![这里可以写图片描述](https://static.zkqiang.cn/images/20191019181145.JPG-slim)
如果使用图床链接的话,有可能复制后图片不能被上传,需要手动在微信重新上传替换。
### 代码块 ### 代码块
```java
代码高亮使用了 Github 配色方案,后续会加入更多配色。 public class Main {
public static void main(String[] args) {
**注意:由于微信编辑器限制,复制后若在微信编辑器中点击代码块,会被微信自动重置后它的配色,只能重新再复制** System.out.println("Hello, World!");
```cpp
#include <stdio.h>
const int MAX = 10;
int cache[MAX] = {0};
int fib(int x) {
if (x == 1) return 1;
if (x == 0) return 0;
if (cache[x] == 0) {
int ret = fib(x - 1) + fib(x - 2);
cache[x] = ret;
} }
return cache[x];
}
int main() {
int i;
printf("fibonacci series:\n");
for (i = 0; i < MAX; ++i) {
printf("%d ", fib(i));
}
return 0;
} }
``` ```
### 内联代码 ### 内联代码
inline code `{code: 0}` inline code `{code: 0}`
### 表格 ### 表格
表格无法使用自定义样式,暂时没找到解决途径
| Header 1 | Header 2 | | Header 1 | Header 2 |
| --- | --- | | --- | --- |
| Key 1 | Value 1 | | Key 1 | Value 1 |
@ -94,15 +42,14 @@ inline code `{code: 0}`
| Key 3 | Value 3 | | Key 3 | Value 3 |
### 超链接 ### 超链接
如果是公众号文章的超链接,是可以点击打开的,但其他链接都无法点击,所以这里使用类似于文献的底部引用。 如果是公众号文章的超链接,是可以点击打开的,但其他链接都无法点击,所以这里使用类似于文献的底部引用。
例如: 例如:
[这是一篇公众号文章](https://mp.weixin.qq.com/s/ahpV7Poj5wHmtUP6vqy3gg) - [2019 GitHub 开源贡献排行榜新鲜出炉!微软谷歌领头,阿里跻身前 12](https://mp.weixin.qq.com/s/_q812aGD1b9QvZ2WFI0Qgw)
- [Google 搜索的即时自动补全功能究竟是如何“工作”的?](https://mp.weixin.qq.com/s/YlMISSc3Sn890BzTLytcLA)
[这是我的博客地址](http://zkqiang.cn) - [厉害了,原来 Redisson 这么好用!](https://mp.weixin.qq.com/s/lpZ7eRdImy0MyTEVH68HYw)
- [一文带你搞懂 “缓存策略”](https://mp.weixin.qq.com/s/47A_iXY_nArURwUTPHr2IQ)
[通过引号设置引用名](http://prod.zkqiang.cn/wxeditor "这是自定义的引用名") - [Java Getter/Setter “防坑指南”](https://mp.weixin.qq.com/s/TZqcAw7NTlcvU-p930-eHA)
- [太棒了GitHub Review 代码能力小升级](https://mp.weixin.qq.com/s/Lok0epqn91Q51ygZo_FLkg)
[本项目是 Fork 自 Lyric 原项目后的二次开发,感谢他的贡献!](https://github.com/lyricat/wechat-format "原项目代码库") - [巧用 Redis Hyperloglog轻松统计 UV 数据](https://mp.weixin.qq.com/s/w1r-M6YVvQSfUtzO_xe44Q)

BIN
assets/images/qrcode.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -107,11 +107,11 @@
<p>除了常规 Markdown 格式化,还增加了外链引用、注音样式等。</p> <p>除了常规 Markdown 格式化,还增加了外链引用、注音样式等。</p>
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<img src="https://static.zkqiang.cn/images/20191019181436.JPG-slim" style="max-width: 300px"> <img src="assets/qrcode.jpg" style="max-width: 300px">
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" <el-button type="primary"
@click="openWindow('https://github.com/zkqiang/wechat-format')">查看 GitHub 仓库</el-button> @click="openWindow('https://github.com/yanglbme/wxmd-editor')">查看 GitHub 仓库</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>