关于前端:微信公众号-Markdown-编辑器

35次阅读

共计 3247 个字符,预计需要花费 9 分钟才能阅读完成。

微信公众号文章 Markdown 在线编辑器,应用 markdown 语法创立一篇简介美观大方的微信公众号图文。因为发版本麻烦,和一些性能无奈扩大停滞开发了,将来不再开发 Chrome 的插件(暂存在 chrome 分支),通过 web 版本定制更丰盛的性能。

Github: https://github.com/jaywcjlove…
官网:https://jaywcjlove.github.io/…

性能个性

开发计划和一些性能介绍,有需要能够在 issue 中提,使得工具变得更加欠缺。上面示例用于 web 利用中成果展现。

  • [x] 反对 Markdown 所有根底语法
  • [x] 反对自定义 CSS 款式
  • [x] 反对主题抉择 & 编辑预览。
  • [x] 反对明暗两种主题预览。
  • [] 反对色盘取色,疾速替换文章整体色调
  • [x] 反对 URL 参数加载 Markdown 内容。
  • [x] 反对 URL 参数抉择预览主题。

反对代码块款式

上面是 jsx 代码块展现示例,并高亮代码,用于 web 利用中成果展现。

function Demo() {return <div className="demo">Hello World!</div>}

上面是 css 代码块展现示例,并高亮代码,用于 web 利用中成果展现。

li {
  font-size: 16px;
  margin: 0;
  line-height: 26px;
  color: rgb(30 41 59);
  font-family:-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif;
}

反对内联代码

用于 web 利用中成果展现。

Inline Code {code: 0}

反对表格

表格无奈应用自定义款式,临时没找到解决路径

Header 1 Header 2
Key 1 Value 1
Key 2 Value 2
Key 3 Value 3

反对 GFM 脚注

这是一个简略的 Markdown1 语法的脚注 2。页面最初有一些额定的文字描述。留神这不是残缺的注脚3 个性。

反对正文

<ruby>
  汉 <rt>Han</rt>
</ruby>

汉字注音成果:
<ruby>
汉 <rt>Han</rt>
字 <rt>zi</rt>
拼 <rt>pin</rt>
音 <rt>yin</rt>
注 <rt>zhu</rt>
音 <rt>yin</rt>
</ruby>

反对自定义款式

<!–rehype:style=color: red;–>

在 Markdown 中 HTML 正文也能够用在 markdown 中,利用这一特点,为一些内容自定一样式。应用 HTML 正文 <!--rehype:xxx--><!–rehype:style=color: red;background: #ff000033;–> 让 Markdown 反对款式自定义。

## 定义题目款式
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

反对对某些文字变更款式,如_文字色彩_<!--rehype:style=color: red;-->,文字色彩将被设置为红色(red)。

⚠️ 留神:这一个性可能实用于有肯定 css 前端基础知识的用户,不过它也非常简单,应用 <!--rehype:style= 开始,--> 完结,两头包裹 css 款式,如 color: red; 设置文字红色。

标记疏忽内容

此个性利用 HTML 正文在 markdown 中被疏忽的个性,标记须要疏忽的内容,标记开始 <!--rehype:ignore:start-->,标记完结 <!--rehype:ignore:end-->,被标记的内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展现内容,比方 GitHub 中能展现。

# 正文疏忽

<!--rehype:ignore:start--> 内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展现内容。<!--rehype:ignore:end-->

反对 URL 参数加载 Markdown 内容

https://<URL>?md=<Markdown 资源 URL>

加载 Markdown 内容的示例 URL:

https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md

Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md

主题定制

在目录 src/themes 中寄存默认主题,在 src/store/context.tsx 中配置主题,主题应用 css 定义款式,不反对简单的选择器。提供在线主题编辑器,欢送批改并 PR 进仓库供大家应用。

/* 1~6 题目款式定义 */
h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
a {color: red;} /* 超链接款式定义 */
strong {} /* 加粗款式定义 */
del {} /* 删除线款式定义 */
em {}  /* 下划线款式定义 */
u {}   /* 下划线款式定义 */
p {}   /* 段落款式定义 */
ul {}  /* 无序列表款式定义 */
ol {}  /* 有序列表款式定义 */
li {}  /* 列表条目款式定义 */
blockquote {} /* 块级援用款式定义 */
table {}
td {}
th {}
pre {}        /* 款式定义 */
.code-highlight {} /* 代码块款式定义 */
.code-line {}      /* 代码块行款式定义 */
.code-spans {}     /* 代码块行款式定义 */

sup {} /* GFM 脚注款式定义 */
.footnotes-title {} /* GFM 脚注,参考题目款式定义 */
.footnotes-list {} /* GFM 脚注,参考列表款式定义 */

.image-warpper {} /* 图片父节点款式定义 */
.image {} /* 图片款式定义 */

/* 局部代码高亮款式 */
.comment {}
.property {}
.function {}
.keyword {}
.punctuation {}
.unit {}
.tag {}
.color {}
.selector {}
.quote {}
.number {}
.attr-name {}
.attr-value {}

部署

轻松通过 docker 部署《微信公众号 Markdown 编辑器》网站利用。

docker pull wcjiang/wxmp
# Or
docker pull ghcr.io/jaywcjlove/wxmp:latest
docker run --name wxmp --rm -d -p 96611:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 96611:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 96611:3000 ghcr.io/jaywcjlove/wxmp:latest

在浏览器中拜访以下 URL

http://localhost:96611/

贡献者

判若两人,感激咱们杰出的贡献者!

上图贡献者列表,由 action-contributors4 主动生成贡献者图片。

License

依据 MIT 许可证取得许可。


  1. GitHub 格调的 Markdown 标准 https://github.github.com/gfm/ ↩
  2. 脚注 https://github.blog/changelog… ↩
  3. 微信文章不反对锚点跳转和关上第三方 URL 超链接,所以不反对残缺的注脚个性。↩
  4. Action Contributors https://github.com/jaywcjlove… ↩

正文完
 0