Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haixiangyan/codeblock-beautifier
💅 A chrome extension for highlighting codes of Medium Articles
https://github.com/haixiangyan/codeblock-beautifier
beautifier chrome-extension css highlight javascript medium
Last synced: 9 days ago
JSON representation
💅 A chrome extension for highlighting codes of Medium Articles
- Host: GitHub
- URL: https://github.com/haixiangyan/codeblock-beautifier
- Owner: haixiangyan
- License: apache-2.0
- Created: 2019-01-01T17:30:44.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-10T17:12:30.000Z (over 5 years ago)
- Last Synced: 2024-05-20T11:03:45.537Z (6 months ago)
- Topics: beautifier, chrome-extension, css, highlight, javascript, medium
- Language: CSS
- Homepage: https://chrome.google.com/webstore/detail/code-block-beautifier/gpcjjddhdnilcbddlonlfgdbejfboonn
- Size: 4.81 MB
- Stars: 122
- Watchers: 1
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README-CN.md
- License: LICENSE
Awesome Lists containing this project
README
# Code Block Beautifier
![](https://img.shields.io/chrome-web-store/v/gpcjjddhdnilcbddlonlfgdbejfboonn.svg)
![](https://img.shields.io/chrome-web-store/users/gpcjjddhdnilcbddlonlfgdbejfboonn.svg)
![](https://img.shields.io/chrome-web-store/stars/gpcjjddhdnilcbddlonlfgdbejfboonn.svg)
![](https://img.shields.io/github/license/Haixiang6123/codeblock-beautifier.svg)本插件主要用于高亮 [Medium]() 里文章的代码块,现在已经可以高亮所有带有 `
` 元素的网站,如[简书](https://www.jianshu.com/), [知乎](https://www.zhihu.com/)等。你也可以通过这个[视频](https://www.bilibili.com/video/av40197852/)来了解这个插件。
## 样例
![Scrrenshot](screenshot/effect.png)
## 安装 & 下载
你可以点[这里](https://chrome.google.com/webstore/detail/code-block-beautifier/gpcjjddhdnilcbddlonlfgdbejfboonn)从谷歌商店安装这个插件。
如果不能科学上网,可以直接从 Github 上[直接下载](https://github.com/Haixiang6123/codeblock-beautifier/blob/master/pkg/codeblock-beautifier.crx)
下载后可以用这篇[文章](https://medium.com/@haixiang6123/do-you-really-know-new-in-js-6ce794874f44)来先尝试一下。
## 使用
![使用](screenshot/how-to-use.png)
## 特点
* ⚒ 高亮美化网站中 `
` 里的代码* 🕶 可以根据你的语言偏好来自动高亮对应编程语言
* 🔓 可以自动检测网站中已定义的语言,并高亮
* 🎁 目前已支持 [Medium](https://medium.com/), [StackOverflow](https://stackoverflow.com/),
[简书](https://www.jianshu.com/), [知乎](https://www.zhihu.com/), [W3C Plus](https://www.w3cplus.com/).* 🎉 80 多种主题可选
* 🎊 20 多种编程语言可选
## 为什么要写这个插件
写这个插件的初衷是因为 [Medium](www.medium.com) 总是不高亮作者的代码。当然也有人用 Codepen, CodeSandbox 或者 Gist 来嵌入代码。
但是这样实在麻烦,所以有些人(比如我)就很不想为了几句代码而创建一个 Gist 文件,所以也有些人直接用 Medium 提供的代码块。所以我经常看到这样的代码块:![No highlight](screenshot/notHighlight.png)
但是我更想看到的是简书的高亮代码:
![Highlight](screenshot/highlight.png)
所以我写了这个插件来高亮 [Medium](www.medium.com) 里的代码块,后面还意外发现简书,知乎,StackOverflow 等网站都能高亮,嘻嘻!
## 最后
在巴哈马旅游的时候就在构想这个插件,元旦回来后立马开工写了6天左右,其中也修复了很多 Bug。
当然 Bug 是修不完的,肯定还有一些 Bug 我没发现,如果你遇到了请给我写 Issue!
如果你也喜欢我的插件,麻烦给个五星好评 :),谢谢!