Giter Club home page Giter Club logo

wp-code-highlight.js's Introduction

[WP Code Highlight.js] Project

Project Information

Project Name:

WP Code Highlight.js

Github Home:

https://github.com/owt5008137/WP-Code-Highlight.js

Plugin Home:

http://wordpress.org/plugins/wp-code-highlightjs/

Description:

This is a plugin of Wordpress using Highlight.js 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.

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

  1. Open plugin installing page
  2. Search WP Code Highlight.js
  3. Install it

Install custom

  1. Download release package
  2. Unzip and rename folder name into wp-code-highlight.js
  3. Move this folder into [your wordpress path]/wp-content/plugins/ folder

Have fun.

About:

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 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 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 30-40KB) or extended package(about 60-70KB). 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.

@geraint @David-CodingSerf @shiya @Beej126 @kylegundersen FAQ


Any questions please mailto [email protected] or [email protected]

Report Problems: https://github.com/owt5008137/WP-Code-Highlight.js/issues

See readme.txt for more detail

Notes

[stackedit]: 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.

[highlight.js]: 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.

[wp-code-highlight.js]: WP Code Highlight.js is a syntax highlight plugin for Wordpress, which using highlight.js to highlight codes.

[pandoc]: 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.

wp-code-highlight.js's People

Contributors

owent avatar codingserf avatar geraintp avatar beej126 avatar iamakulov avatar jason0x90 avatar shiya avatar

Stargazers

发呆数星星 avatar Matej Rešetár avatar Aslan French avatar  avatar Dylan Deng avatar Tapha Ngum avatar dangge avatar Mehrshad Darzi avatar yiwanzi avatar Vincent Tang avatar ifeegoo avatar Yang avatar QiussTSE avatar Maxime avatar Akiya avatar akabeko avatar Jonathan Hult avatar Nicholas Rogoff avatar Pothi Kalimuthu avatar Travis Taylor avatar Ervins Strauhmanis avatar Tony Cecala avatar Chris Snedaker avatar  avatar  avatar  avatar

Watchers

James Cloos avatar  avatar Pothi Kalimuthu avatar  avatar Chris Snedaker avatar  avatar Kyle Gundersen avatar  avatar

wp-code-highlight.js's Issues

Should delete all the br tags which belong to BBCode

When putting out the contents of article, WP will add br for every line without deleting \n. Pre will be used when parsing BBCode and every paragraph will wrap line which causes addition of line spacing.

BBCode
bbcode

pre-code
pre-code

The hljs_code_handler function

function hljs_code_handler($atts, $content) {
    $language = '';
    if (!empty($atts['lang']))
        $language = "class=\"${atts['lang']}\"";
    return "<pre class=\"hljs\"><code $language>" . ltrim(str_replace('<br />', '', $content), '\n') . '</code></pre>';
}

Could not parse BB-Tag

There has a bug in current version(0.5.0), could not parse [code][/code] even enabled bb-tag support.
The line 411 in file wp_code_highlight.js.php

if (hljs_get_lib_option('shortcode')) {

The hljs_get_lib_option should be hljs_get_option

Can't add code indentation in tinyMCE

When writing code inside [code]...[/code] I can't find a way to insert code indentation. If I hit the TAB button the focus changes; if I insert special chars like &nbsp; they are deleted. Behaviour is not consistent if I start to switch from Visual to Text editor and back.

How can code bi indented properly?
If you have a solution I can code it myself and then PR

Thanks!!!

parser bug

this code parsed incorectly(

<pre><code class="javascript">
for(var code in codes)
    if (codes[code])
        codes[code]();
</code></pre>

parser think [code] is a bb-code

Hooking into `wp_head` and not `wp_enqueue_scripts`

Hello. Neat plugin. HLJS is super cool. I noticed this plugin hooks into wp_head instead of wp_enqueue_scripts with the following line of code:

add_action('wp_head', 'hljs_include');

As I understand it wp_enqueue_scripts is where most themes hook in and I believe where plugins typically hook in as well to load. Is there a reason not to hook into wp_enqueue_scripts?

"Nasty Hack" line 273 Breaks Plugin when content dir is not in the default place

If you've moved you content directory to another location
http://codex.wordpress.org/Editing_wp-config.php#Moving_wp-content_folder
http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

(common if you user version control to manage your wp site) this plugin is broken because its assumes the plugin is somewhere it's not. the result is themes don't get loaded in the admin panel selector so no style sheet even the default one is ever loaded for the highlighter
screen shot 2015-02-17 at 15 43 02

WP 4.7.4 class not added

Hi, clean version of WP 4.7.4
Theme: hueman.

Class: hljs not added to pre element, but only to code.

lines won't break?

I've got some code in a post with very long lines. The lines do not break, so the code goes off screen.

See picture here:

image

any clue how to fix this?

markdown

使用markdown,代码内不支持换行,所有代码都挤到一行了。怎么解决?

行号|复制

可以支持行号显示,并双击复制粘贴吗?

Worpress 4.7.3 无法选择其他语言

设置页面选中了一些其他的语言,例如Swift和Lua,但是点击保存按钮,页面刷新后勾选项又没了,而且实际对Swift代码的高亮也没有生效

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.