Skip to content

Latest commit

 

History

History
277 lines (173 loc) · 9.33 KB

README.md

File metadata and controls

277 lines (173 loc) · 9.33 KB

hzwz-markdown 是一款基于 Python 实现的,用于 将Markdown文件转换成带样式的微信公众号文章HTML 的工具。

简单点说:排版工具(Markdown → 公众号)

如果你和笔者一样,用 Markdown语法 撰写文稿,再用 统一样式 对文章进行排版,最后发布到公号上,使用此工具,可以有效提高你的排版效率。

网上提供的Markdown转换工具不少,如:

先感谢下大佬们提供的工具,笔者在开发时复制了部分样式,如 Mac样式窗口(真香),而在使用这些工具时,发现了两个问题:

  • 样式单一:烂大街,有些支持定制,但要自己写CSS,不会前端谁顶得住啊。
  • 夹带私货:要登录,要关注,要跳转,恶心心,我只是想转下文件,TM搞那么复杂。

遂有了自己写一个工具的想法,我的愿景:

  • 样式灵活:样式我不会写, 我会啊,看到喜欢的公号样式直接偷,还有谁?
  • 简单易用:用户通过尽可能简单的配置,一键完成转换,一劳永逸。
  • 纯粹&可定制:代码开源,没有私货,纯透明,如果懂点Python基础还能自行订制。

0x1、使用前的准备工作

一、把项目下载到本地

可以直接调用 git clone 克隆项目,也可以直接Download代码压缩包

二、下载安装Python与NodeJs

Windows用户,直接到官网下载安装包exe,然后无脑下一步安装即可~

Mac用户,可以直接用brew直接安装

brew install python3

// 查看可用node版本
brew search node
// 安装需要的版本
brew install node@12

Linux用户,稍微繁琐一些,都需要编译安装,先是Python3

// 安装依赖
sudo yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel libffi-devel

// 下载安装包,如这里下载3.7.2版本
wget https://www.python.org/ftp/python/3.7.2/Python-3.7.2.tgz

// 解压缩安装包
tar -zxvf Python-3.7.2.tgz 

// 配置安装路径
cd Python-3.7.2
./configure prefix=/usr/local/python3

// 编译安装Python3
make && make install

// 测试是否安装成功
python3 -V
pip3 -V

然后是Nodejs:

cd /usr/local
mkdir nodejs
cd nodejs
wget https://nodejs.org/dist/v12.14.0/node-v12.14.0-darwin-x64.tar.gz

// 解压及重命名
tar zxvf node-v12.14.0-darwin-x64.tar.gz

// 删除多余压缩包
rm -rf node-v12.14.0-darwin-x64.tar.gz

// 改名nodejs
mv node-v12.14.0-darwin-x64/* /usr/local/nodejs

// 建立软链接
ln -s /usr/local/nodejs/bin/node /usr/local/bin
ln -s /usr/local/nodejs/bin/npm /usr/local/bin

// 测试是否安装成功
node -v
npm -v

如果以上方法走不通,建议善用搜索引擎~

三、pip命令安装用到的依赖库

直接执行下述命令安装 (Mac使用pip3)

pip install -r requirements.txt

可能出现的错误:

ImportError: cannot import name ‘soft_unicode’ from 'markupsafe’

# 解决方法:把已经安装的版本卸载,安装旧版本
pip install markupsafe==2.0.1

0x2、怎么用?

1、准备下样式配置文件

编译时,只会使用custom里的样式配置文件!!!你可以:

  • ① 复制author文件夹里笔者提供的配置文件到custom目录下;
  • ② 复制default_config.ini文件到custom目录下,然后自行定制;

定制的规则也很简单,如:

是的,主要修改下None的值,除codestylemac_window外,其他的值都指向对应的模板文件,如:h2=1 → 指向:template/h2/1.html

codestyle → 代码高亮,基于highlight.js,通过黑魔法将css转换为ini,并将样式写入到HTML中。 喜欢什么代码样式,自己去官网挑:https://highlightjs.org/

复制下这个样式名,如此处的:atom-one-dark 即可应用。

mac_window → Mac窗口风格,样式提取自:https://www.mdnice.com/,有下述几种可供选择:

具体效果如下:

Tips:样式配置文件配置一次就可以了,后续不用配置~

2、生成转换后带样式的HTML

将md文件放到 article/md 目录下,如:

然后找到app.py文件,右键run运行:

接着,控制台会输出应用的样式及输出的文件路径:

来到article/out目录下可以看到生成带样式的HTML文件,排版有点乱,没关系:

3、复制到微信公众号

接着打开微信公众号,新建文章,F12打开开发者工具,定位到空白内容,如下图:

右键Edit as HTML,把生成的带样式的HTML代码拷进去,然后点下外部空白区域即可:

看着有点乱?错位,没关系,点击下保存或者预览,即可恢复正常

还不正常也没关系,预览发送到手机查阅效果:

可以,效果很不错,还有自定义头尾样式,看起来步骤很多,其实非常简单,真一步到位。

这就是这个脚本的用法,如果你想订制自己的样式的话,可以继续往下看~


0x3、自定义自己的样式

1、模板的获取

以某公号的样式为例:

这个黑框背景图片和二级标题不错,网页文章页,F12定位到对应结点,

右键CopyCopy element,粘贴到工程的 wash/before/in.html,执行下清洗脚本:

将out.html文件放到template/image目录下,改名为2.html,接着改下样式文件,image=2

运行后把生成的带样式的HTML复制到微信,点击保存后看下效果:

黑边到手,剩下的二级标题也是如法炮制:

看下效果:

二、自定义渲染器

如果这个工具满足不了你,而你动手能力较强的,也可以直接改 styles_renderer.py 自行订制一个渲染器。

附:开发这个工具的一些记录