嘿,我造了个代码高亮的插件

简介: 写这个插件的初衷是因为 Medium 总是不高亮作者的代码。当然也有人用 Codepen, CodeSandbox 或者 Gist 来嵌入代码。 但是这样实在麻烦,有些人(比如我)就很不想为了几句代码而创建一个 Gist 文件,然后直接用 Medium 提供的代码块。所以我经常看到这样的代码块为了解决这个问题,我就写了这个插件来高亮 Medium 里的代码块,后面还意外发现简书,知乎,StackOverflow 等网站都能高亮,嘻嘻!

image.png


源起




写这个插件的初衷是因为 Medium 总是不高亮作者的代码。当然也有人用 Codepen, CodeSandbox 或者 Gist 来嵌入代码。 但是这样实在麻烦,有些人(比如我)就很不想为了几句代码而创建一个 Gist 文件,然后直接用 Medium 提供的代码块。所以我经常看到这样的代码块


image.png


为了解决这个问题,我就写了这个插件来高亮 Medium 里的代码块,后面还意外发现简书,知乎,StackOverflow 等网站都能高亮,嘻嘻!


样例



先看看效果吧~


image.png


安装与下载




  1. 可以点击这里从谷歌应用商店下载。
  2. 如果不能科学上网,可以直接从我 Github 上直接下载


使用




点击插件图标后会弹出下面的设置面板,看起来有点像编辑器。如果像平时写网页的UI布局就太无聊了,所以设计UI成编辑器的样子😝。


image.png


更多




  1. 更多内容可以访问 Github 上的 repo
  2. 我也在 B 站上录了个介绍视频,有兴趣可以点击这里观看


最后



在巴哈马旅游的时候就在构想这个插件,元旦回来后立马开工写了7天左右,其中也修复了很多 Bug。 当然 Bug 是修不完的,肯定还有一些 Bug 我没发现,如果你遇到了请给我写 Issue!


相关文章
|
5月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
93 4
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
113 0
|
6月前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
144 0
SVG VSCode 插件(语法提示补全、预览插件)
SVG VSCode 插件(语法提示补全、预览插件)
1384 0
VSCode KoroFileHeader 注释插件(支持多种语言,可自定义)
VSCode KoroFileHeader 注释插件(支持多种语言,可自定义)
384 0
|
前端开发 JavaScript
Vscode 使用 markdown preview enchance插件运行markdown 语法
Vscode 使用 markdown preview enchance插件运行markdown 语法
Vscode 使用 markdown preview enchance插件运行markdown 语法
|
JavaScript 前端开发 PHP
12款最佳的 WordPress 语法高亮插件推荐
  语法高亮工具增强了代码的可读性,美化了代码,让程序员更容易维护。语法高亮提供各种方式由以提高可读性和文本语境,尤其是对于其中可以结束跨越多个页面的代码,以及让开发者自己的程序中查找错误。在这篇文章中,我们选择了12款最佳的 WordPress 语法高亮插件分享给大家,这将有助于你管理,美化和突出你的代码。
2540 0
|
自然语言处理 前端开发 JavaScript
开发一个 vscode 插件,提升 markdown 排版可读性🌿
开发一个 vscode 插件,提升 markdown 排版可读性🌿
455 0
VSCode 自动补全插件编写到发布
VSCode 自动补全插件编写到发布
334 0
VSCode 自动补全插件编写到发布
|
前端开发 JavaScript
基于prismjs的Typecho代码高亮插件CodeHighlighter
基于prismjs的Typecho代码高亮插件CodeHighlighter
443 0