Project Information
Project Name:
WP Code Highlight.js1
Github Home:
https://github.com/owent/WP-Code-Highlight.js
Plugin Home:
http://wordpress.org/plugins/wp-code-highlightjs/
Description:
This is a plugin of Wordpress using Highlight.js2 to make codes on posts, articles or any web pages more beautiful and easier to read.
This plugin allow you to load Highlight.js from local web server or some of public CDN we collected.
To make you easier to migrate from SyntaxHilighter and Google Prettify to Highlight.js, this plugin will provide some compatible mode so that you need not to change any code on your old web pages. They will be converted automaticly.
At the same time, WP Code Highlight.js also allow you to set options of Highlight.js in the setting page of your wordpress. And we also provide some other useful options.For example, you can use only common language package
Usage:
Install from wordpress
- Open plugin installing page
- Search WP Code Highlight.js
- Install it
Install custom
- Download release package
- Unzip and rename folder name into wp-code-highlight.js
- Move this folder into [your wordpress path]/wp-content/plugins/ folder
Have fun.
About:
Why Highlight.js ?
Recently, I determine to turn to use Markdown to write blog. But here is a problem, I use SyntaxHighlighter before and I’m failed to find a tool to support SyntaxHighlighter and markdown very well. But with Highlight.js it’s very easy.
There is a web markdown editor named [StackEdit]3 you can use to write markdown and publish to Github, Wordpress, Blog and etc. or export it to html. It allow you to write code like what you do in github but it’s more powerful. Especially , it has Highlight.js and Prettify plugin to highlight codes. Or you can disable code highlight and it will use <pre><code> to wrap codes. This also can be used by Highlight.js.
If you would like to just use vim, emacs or other text editor. There is also a tool named [Pandoc]4 that you can use to convert markdown to many formats. with option –no-highlight, it will also use <pre><code> to wrap codes.
Start to write a plugin
There is already a plugin named wp-highlight.js which can be used in Wordpress. But it load the full version of Highlight.js. It cost too much data traffic(about 180 KB). It will slow down loading time and I really don’t need so many languages(especially some of them I have never heard of). I don’t want to pay for it. So I need a plugin to load just the languages I need, or download Highlight.js from public CDN.
At the same time, I wrote many blogs before and using SyntaxHighlighter for years, I do not want to fix my codes that already puhlished. So I need a plugin to convert those code automaticly.
Then this plugin starts. It allow user only load common package of Highlight.js (only 31KB) or extended package(about 54KB). It also can analysis doms on web page, find codes in SyntaxHighlighter format or Prettify format, and then turn them into Highlight.js format, and finally , highlight them.
Thanks to
This plugin fork from wp-highlight.js and rewrote all the codes. So we must thanks to wp-highlight.js’s author Igor Kalnitsky.
Also thanks to Highlight.js’s author Ivan Sagalaev
And thanks to all contributors and users. You make this plugin better.
FAQ
Any questions please mailto [email protected] or [email protected]
Report Problems: https://github.com/owent/WP-Code-Highlight.js/issues
- WP Code Highlight.js is a syntax highlight plugin for Wordpress, which using highlight.js to highlight codes. ↩︎
- Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection. ↩︎
- StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites. ↩︎
- Pandoc is a tool to convert files from one markup format into another, it support more than ten format as input and even more format as output. ↩︎
