In the previous post, I shared 800+ lines of an unbelievably short piece of C code.
So I looked up a way to add code highlighting to WordPress without a plugin.
Reposted below:
If you only occasionally add code to a blog post, installing a highlighting plugin seems unnecessary. If you stop using the plugin one day, the page could become a mess. In fact, most plugins insert extra tags into the code and then style them with CSS, as you can clearly see by viewing the page source.
Today I'd like to recommend a small local tool for converting code into highlighted HTML: CodeRenderUnmi
This syntax-highlighting tool is based on dp.SyntaxHighlighter. It supports the following languages:
java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi.
Online code-highlighting converter
It makes it easy to paste code into your blog: customize the relevant styles (the contents of highlight.css ; .Text supports custom styles, or you can add syntax styles to the template), then copy the HTML generated by this tool to highlight your code. Support for more languages can be added. This program extends dp.SyntaxHighlighter with Perl support; the corresponding syntax JS and CSS can be found online. To add a language, insert the relevant code into shCore.js and highlight.css.
Program interface
Original illustration (external image currently unavailable)
It's easy to use: paste the code you want highlighted into Source Code, select the language, and click Render. The corresponding HTML will appear in HTML Code, and you can see the result in HTML Preview.
A brief guide: choose a supported syntax from the Lang dropdown. Gutter, Controls, CollapseAll, FirstLine and Columns, to the right of Options, control the additional elements generated. Try them one by one to see what they do. Each display or input area has Copy/Paste/Clear shortcut links, and there is also an overall Clear button.
Copy the generated HTML, switch the blog editor to HTML source-editing mode, and paste it in.
For the highlighting to display correctly, you also need to load the “highlight.css” stylesheet (included in the downloaded archive) in your WordPress theme.
Here's how:
First, upload highlight.css to the directory of the theme you're using.
Next, open header.php and find:
- <link rel=“stylesheet” type=“text/css” href=“<?php bloginfo(‘template_directory’); ?>/style.css” />
Add the following after it:
- <link rel=“stylesheet” href=“<?php bloginfo(‘template_url’); ?>/highlight.css” />
Of course, you can simply copy all the code from highlight.css into your theme's style.css and skip the steps above!
If the default styles don't suit your needs, you can customize them by editing “highlight.css” to change the highlighting, border and background colors, and so on.
Bear in mind that WordPress automatically replaces half-width symbols with full-width ones. Anyone copying the function code will get full-width punctuation, making it unusable. Don't forget this!
The solution:
Open and edit wp-includes/formatting.php, and find the following code:
- // static strings
- $curl = str_replace($static_characters, $static_replacements, $curl);
- // regular expressions
- $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
Comment out the two lines beginning with $curl, as shown below:
- // static strings
- //$curl = str_replace($static_characters, $static_replacements, $curl);
- // regular expressions
- //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
Reposted from: http://zmingcx.com/wordpress-code-highlight.html