如何用Markdown优雅写公众号文章?主题配置文件目录位于项目wechat-format/src/assets/scr

问题的最初

我试着在公众号上“玩点花样”，可它的文章编辑器用起来也让我很不习惯 —— 写两句就又得重新调整下格式就让我很忧伤

想优雅地写文章，就只有两个选择：

要么，用公众号自带的，忍受不可预期样式、属性
要么，我找工具，写完再粘贴进来

转机

后来我机缘巧合发现 lyricat/wechat-format项目
使用熟悉的Markdown语法编写文章，可直接粘贴到公众号文章编辑器，而且样式不变！！
再也不用过多担心内容以外的杂事，专注写作内容， nice~

使用介绍

对，不用猜了。
图片就是这篇文章，演示就是这么硬核

甲方想要更多主题

项目本身提供，两种主题 default/lupeng:

感觉没多大区别？恭喜！你感觉是对的~

创建自定义主题

添加主题配置文件

主题配置文件目录位于项目wechat-format/src/assets/scripts/themes下。我们复制一份default.js命名为orange.js进行修改：

var defaultTheme = {
  BASE: {
    'text-align': 'left',
    'color': '#3f3f3f',
    'line-height': '1.5'
  },
  BASE_BLOCK: {
    'margin': '20px 10px'
  },
  // block element
  block: {
    h2: {
      'font-size': '140%',
      'text-align': 'center',
      'font-weight': 'normal',
      'text-align': 'center',
      'margin': '80px 10px 40px 10px'
    },
    h3: { ... },
    p: { ... },
    ...
    }
}

根据需要，将对应标签的样式调整至需要即可

引入主题配置文件

打开文件wechat-format/src/index.html 第111行,引入主题配置：

  <script src="assets/scripts/themes/default.js"></script>
  <script src="assets/scripts/themes/lupeng.js"></script>
  <script src="assets/scripts/themes/orange.js"></script> <!--  引入新建主题 -->

配置editor.js

打开文件wechat-format/src/assets/scripts/editor.js，themeOption选项中添加：

currentTheme: 'default',
themeOption: [
    { label: 'default', value: 'default', author: 'Lyric'},
    { label: 'lupeng', value: 'lupeng', author: '鲁鹏'},
    { label: '橙色主题', value: 'orange', author: 'Abo'} // 配置 新建主题
]

浏览器打开wechat-format/src/index.html 出现 橙色主题就成功啦

最后

如果您喜欢❤️，给 [lyricat/wechat-format]项目点个Star✨给作者lyricat 鼓励
后续将补全常用四种色系主题，希望更加好用