Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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!
如果你也喜欢我的插件,麻烦给个五星好评 :),谢谢!