业余草微信公众号Markdown编辑器, 适合代码排版

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xmt1139057136/article/details/79825204 随着大家都转战微信公众平台,如何快速的编写文章就摆在了首要位置。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xmt1139057136/article/details/79825204

随着大家都转战微信公众平台,如何快速的编写文章就摆在了首要位置。不可否认,使用微信自带的编辑器可以做出好看的排版,甚至用第三方编辑器有更多的模板。但是,这些全部都需要手动的调整。本来公众平台就算是自媒体,非全职的自媒体哪有那么多时间和精力去搞排版。那么,寻找一种简单的排版方式也势在必得。

markdwon自然是首选,然而微信公众平台并没有提供翻译模板,只能自己寻找了。市场上的模板很多,我们可以找一款自己合适的,复制渲染后的html到微信公众平台。我寻找了好久,发现关注的几个大佬都采用一种样式,果然,都是采用的一个开源的markdwon编辑器,为开源点赞。我fork了一个版本,修改了本地开发模式,更适合小白入手。更改了标题样式。最终结果如下: https://md.rmiao.top/

微信公众号格式化工具

使用微信公众号编辑器有一个十分头疼的问题——粘贴出来的代码,格式错乱,而且特别丑。这块编辑器能够解决这个问题。

用法

  • 复制你的markdown
  • 粘贴到这里
  • 点击预览
  • 选择样式
  • 复制到微信公众号编辑页面

代码示例

 
 
  1. var OnlineMarkdown = {
  2. init: function() {
  3. var self = this;
  4. self.load().then(function() {
  5. self.start()
  6. }).fail(function(){
  7. self.start();
  8. });
  9. },
  10. start: function() {
  11. this.updateOutput();
  12. },
  13. load: function() {
  14. return $.ajax({
  15. type: 'GET',
  16. url: params.path || './d.md',
  17. dateType: 'text',
  18. timeout: 2000
  19. }).then(function(data) {
  20. $('#input').val(data);
  21. });
  22. },
  23. updateOutput: function () {
  24. var val = this.converter.makeHtml($('#input').val());
  25. $('#output .wrapper').html(val);
  26. PR.prettyPrint();
  27. }
  28. };
  29. OnlineMarkdown.init();

上面是 JavaScript,下面是 php

 
 
  1. echo 'hello,world'

表格示例

品类 个数 备注
苹果 1 nice
橘子 2 job

以上是用的比较多的,还装了几十个使用频度比较低的插件,主要包括 Snippet 和文件高亮配置,可以在这里查看:https://gist.github.com/barretlee/a5170eb6ca1805f66687063d2e3a4983,你也可以通过 SettingsSync 将这个配置下载下来,id 就是后面半截: a5170eb6ca1805f66687063d2e3a4983

在命令行打开 VSC

在安装好 VSC 后,直接配置 .bash_profile 或者 .zshrc 文件:

 
 
  1. alias vsc='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code';
  2. VSC_BIN='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin';
  3. PATH=$VSC_BIN:$PATH;
  4. export PATH;

然后让配置生效,在控制台执行:

 
 
  1. # 如果没有安装 zsh,可能是 ~/.bash_profile
  2. source ~/.zshrc

这个时候就可以在全局打开了:

 
 
  1. # -a 的意思是不要新开窗口,在当前已经打开的 vsc 中打开文件
  2. vsc path/to/file.ext -a

有同学提到,VSC 的面板上搜索 install 就可以在命令行安装 code 这个命令了,不过我更喜欢使用 vsc来打开文件,这也算是折腾吧


目录
相关文章
|
1月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
87 1
Linux系统之部署轻量级Markdown文本编辑器
|
2月前
|
定位技术 开发工具 Python
代码让微信开屏地球转起来
这段内容介绍了如何使用Python制作一个动态旋转的地球图像,类似于微信启动画面中的地球。文章详细描述了所需准备的三个素材(地球表面、云图和微信地球的抠图),并解释了通过调整云层和地面的旋转速度来实现自然的相对运动效果的基本原理。文中还提供了一个GIF压缩工具的链接,以及部分代码示例。此外,文章最后提到了一些Python学习资源,包括学习路线、开发工具、视频教程、实战案例、练习题和面试资料。
45 0
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
144 0
适用于alist的微信遮罩代码
最近在研究alist网盘工具,终于找到了适用于alist的微信遮罩代码。代码如下:``` ```。下面是示例图片,可根据需要自行替换。![点击查看示例图片](https://ucc.alicdn.com/pic/developer-ecology/ms7h4bs4k7hme_1a36659fd3054e508107f6c764c6f0d3.jpg)
|
2月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
2月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
64 2
|
3月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
|
3月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
102 0
微信小程序开发必备前置知识:基本代码构成与语法
|
3月前
|
小程序 JavaScript 安全
微信小程序实现云闪付支付(代码和注释很详细)
微信小程序实现云闪付支付(代码和注释很详细)