Giter Site home page Giter Site logo

goodbye-syntax-highlighter's Introduction

For years I've used Alex Gorbatchev's SyntaxHighlighter. It has served me well over the years. When I moved to WordPress I tried various plugins based on the library, such SyntaxHighlighter Evolved.

I've decided to start blogging using Markdown. Making this move I needed to find a way to highlight various bits of source code in an easy way. There are many nice libraries that make this a snap, such as google-code-prettify or highlight.js. In the end I decided to go with highlight.js, for the simple reason that it is automatic, working flawlessly with Markdown's code syntax output.

Great, but my existing source code examples use SyntaxHighlighter's style for code blocks (using <pre class="brush: ruby;" />, for example). I could have converted things in a few ways:

  • Change the database
  • Write a JS script to convert the <pre /> structure to <pre><code /></pre>
  • Write a JS script to call highlight.js' highlightBlock method
  • Write a WP plugin and reformat things easily Ding Ding Ding

So there you have it. This WordPress plugin will go through and process your SyntaxHighlighter style blocks into ones that highlight.js works with out-of-the-box. It will also add the language that you have specified with the brush class and add it as a class on the <code /> element (following the HTML5 recommendation). Nothing is changed in the DB, so if you decide to go back to SyntaxHighlighter, you can without any issues.

GeSHi

This plugin now supports conversion of GeSHi style code blocks! Now you can move from plugins such as WP-Syntax and WP-GeSHi-Highlight to highlight.js.

GeSHi uses the syntax that is close to SyntaxHighlighter, except instead of putting the language in the class attribute, it uses the lang attribute. Similar to the SyntaxHighligher conversion, it will go through and process your GeSHi style blocks into ones that highlight.js works with out-of-the-box. It will also add the language that you have specified with the lang attribute and add it as a class on the <code /> element.

goodbye-syntax-highlighter's People

Contributors

visoft avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

goodbye-syntax-highlighter's Issues

Problem with `\`

It seems that the following code will not be correctly transformed:

<pre lang="tex">
$\log e^x=x$
</pre>

it should be something like:

<pre class="prettyprint perl">
  <code class="language-tex">
    <span class="variable">$\</span>
    <span class="keyword">log</span> e^
    <span class="keyword">x</span>=
    <span class="keyword">x</span>$
</code>
</pre>

but it turns out to be

<pre>
<code class="language-tex bash">
<span class="variable">$log</span> e^x=x$
</code>
</pre>

I hope you could have a look!

<pre lang="bash"> doesn´t work with GSH :(

Hi,

I´ve tagged all my code into my wordpress blog with

< "pre lang="bash"" >...< "/pre" >

and after activation your plugin nothing happens with the code. Do you could fix this?

Bye,
Michael

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.