Code Monkey home page Code Monkey logo

wechat-format's Introduction

微信公众号排版编辑器

This project is discontinued. Please use Quail Markdown Tools for better user experience.

这个项目已经停止维护。建议使用Quail 提供的在线转换工具以获得更好的用户体验。

简介

转化 Markdown 到给微信特制的 HTML

优点

  • 能较好地排版
  • 能解决 ulol 元素样式渲染时被微信编辑器重置的问题
  • 能把链接自动转换为参考文献索引,并且附在文字末尾

wechat-format's People

Contributors

lyricat avatar nekocode avatar pengloo53 avatar xiafanglongfei avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wechat-format's Issues

一个建议

真的是很好的工具,这里有一个建议。

可否增加一些设置选项,比如字体设置?

在线服务组件加载失败

发现在线服务前台 Vue 报错,我在服务端测试了一下,显示正常:wechat.90byte.com ,所以猜测你的线上服务有问题,可能需要重启一下。

无法添加 h1

在 css 中我手动添加了 h1 的样式,但在实际编辑器中,# Text使用的仍然是## Text的样式。

表格未输出成功

表格原封不动的输出了,即
| :------: | :------: |
| XXXXX | XXXXX |
这种

我有自有的css样式,怎么可以结合你的这个工具呢?

你好,我之前写微信是用markdown here渲染,也有我自己摸索出来的一套色彩库,觉得你的这个末班很好,不过样式我想选择我的,不知道可以怎么办?

下面是我的markdown css末班

.markdown-here-wrapper {
  font-size: 15px;
  line-height: 1.55em;
  letter-spacing: 0.05em; 
  color:#595959
}


pre, code {
  font-size: 15px;
  font-family: Consolas, Inconsolata, Courier, monospace;
  margin: auto 5px;
}

code {
  white-space: pre-wrap;
  border-radius: 2px;
  display: inline;
}

pre {
  font-size: 15px;
  line-height: 1.4em;
  display: block; !important;
}

pre code {
  white-space: pre;
  overflow: auto;
  border-radius: 3px;
  padding: 1px 1px;
  display: block !important;
}

strong, b{color:#773098;}

hr {
  border: 1px solid #773098;
  margin: 1.5em auto;
}

p {
  margin: 1em 4px !important;
}

table, pre, dl, blockquote, q, ul, ol {
  margin: 10px 5px;
}

ul ul ol, ul ol ol, ol ul ol, ol ol ol {
    list-style-type: disc !important;
   
}

li {
  margin: 10px;
}

li p {
  margin: 10px 0 !important;
}

ul ul, ul ol, ol ul, ol ol {
  margin: 0;
  padding-left: 10px;
}

ul {
  list-style-type: square;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 1em;
  font-weight: bold;
  font-style: italic;
}

dl dd {
  margin: 0 0 10px;
  padding: 0 10px;
}

blockquote, q {
  border-left: 5px solid #9654B5;
  border-right: 1px solid #9654B5;
  padding: 1px;
  color: #616161;
  quotes: none;
  margin-left: 0.7em; 
  margin-top: 3 px;
  background:#FBF9FD
}

blockquote::before, blockquote::after, q::before, q::after {
  content: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1.2em 0 1em;
  padding: 0;
  font-weight: bold;
  font-color:#773098;
}


h1 {
  font-size: 22px;
}

h2 {
  min-height: 32px;
  line-height: 28px;
  border-bottom: solid 1px #000000;
  color: #773098;
  display: inline-block;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #773098;
  padding-top: 5px; 
  padding-right: 0.5em; 
  padding-left: 0.5em;
  margin-bottom: -3px;
  font-size: 18px;
  margin:1em auto;
  padding: 0.5em 0;
  text-align: center;
  width: 85%;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h3 {
  font-size: 16px;
  padding-right: 0.5em; 
  padding-left: 0.5em;
}

h4 {
  font-size: 16px;
  padding-right: 0.5em; 
  padding-left: 0.5em;
}

h5 {
  font-size: 14px;
  padding-right: 0.5em; 
  padding-left: 0.5em;
}

h6 {
  font-size: 16px;
  color: #777;
  padding-right: 0.5em; 
  padding-left: 0.5em;
}

table {
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
  font: inherit;
  border: 0;
}

tbody {
  margin: 0;
  padding: 0;
  border: 0;
}

table tr {
  border: 0;
  border-top: 1px solid #CCC;
  background-color: white;
  margin: 0;
  padding: 0;
}

table tr:nth-child(2n) {
  background-color: #F8F8F8;
}

table tr th, table tr td {
  font-size: 1em;
  border: 1px solid #CCC;
  margin: 0;
  padding: 0.5em 1em;
}

table tr th {
 font-weight: bold;
  background-color: #F0F0F0;
}

p {
  font-size: 15px;
  line-height: 1.75em;
  padding-right: 0.5em; 
  padding-left: 0.5em;
}

链接过滤,自定义颜色,二级列表

可不可以在引用链接的时候对链接进行过滤,比如在本页面跳转的话就不加引用,跳转外部连接再加。

[图片类](#图片类) <a href="#图片类">图片类</a> // 这类就可以不加

[Pinterest ](https://www.pinterest.com/) <a href="https://www.pinterest.com/">Pinterest</a>

如果链接颜色能自定义就理好了。
二级列表似乎识别不了。
image

Bug report li ol hierarchy missing

Original markdown:

*   个人好物
    *   Nitendo Switch + 塞尔达传说
    *   天猫精灵:前后购入 4 个,小朋友最爱
    *   小米之家运动鞋:物美价廉

Rendered in self hosted web site:

image

Rendered in wechat:

image

Bug report, convert failed with unexisted resource

Reproduced steps:

  1. use Markdown below:
送给亲亲的第一条vlog#和平公园撒欢#也送给大家

<video src="/Users/sunzhen/Downloads/vue_video_cache_filtered_spliced.MOV"></video>
  1. Copy
  2. Paste in wx editor.

Behavior:

Paste failed.

Excepted:

Paste successful.

Others

Browser error message:

image

Browser: Version 81.0.4044.43 (Official Build) beta (64-bit)

关于代码块的大小和样式问题

现在的代码块字体太大了,是否可以设置一个可动态调整代码块的功能,现在只有格式,没有颜色样式,感觉很简陋,期待加入代码样式选择功能。

关于标题居中问题

在预览时,标题居中。
复制到微信中时,标题居中。
但是当保存的时候,结果挺好的标题居中效果就没了。

请问这个有办法解决吗?

关于列表的小圆点

将输出复制到微信后,在调整字体大小、缩进、对齐时好像要按照一定的顺序,列表的小圆点才能不发生位移(一般是向左移动)并且造成格式丢失,具体顺序我要再试一下,不知道为什么会这样。

能否提供 API

非常感谢开发了这么好的一个工具,解决了我很大一个痛点。

请问,能否提供这个工具的 API,允许用户向您的服务器发送 markdown 格式的文本,返回得到转换后的文本?

谢谢!

标题为空的时候输出格式不生效

###
##
#

如果 Header 行不带任何文字,编辑器不做任何解析,期望中应该是一个空白行

案例

参考文本如下,最后的三个### 在一些媒体平台作为一个空白行调节间距,wechat-format 未对其进行解析

## [Cosmicast](https://itunes.apple.com/cn/app/cosmicast/id1435195637?mt=8&uo=4)
**价格:¥6.00 → 免费**

**平台:iPhone, iPad**

**大小:23 MB,语言:中文**

国外科技媒体 AppAdvice 2018 年度最佳应用之一,评语「Podcasts Made Simple」,打开即用的播客应用,没有复杂的设置界面和账户系统,还支持 Siri 捷径以及更多功能。
![](./_image/2019-03-13/Cosmicast.png)

### 

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.