As programmers, we spend our working lives discovering code. We want it shown legibly and beautifully. One tool to support here is ‘syntax highlighting.’ Text editors, web viewers, and command-line software do this. We’re so used to highlighting syntax that looking at the code in uniform black-on-white can jarring.
But what do we paint with and what colors? Initially, this decision appears shallow. But the syntax we choose makes essential value decisions about our code. Some questionable ideas are implicit in those color schemes, and the continued use of those themes perpetuates those dubious ideas. I take two of those questionable ideas in this article, demonstrate how our syntax highlighters strengthen those ideas and suggest how to modify them.
Wp-CodeBox provides clean syntax highlighting and advanced features for embedding source code within pages or posts. It supports a wide range of popular languages highlighting with line numbers, code download, Copies to clipboard, collapse code box, automatic keywords link to API manual and maintains formatting while copying snippets of code from the browser
It provides a simple background configuration for highlighter style/formatting customization.
Since the plugin is developing, in the future it will support more options. (CSS option, Keyword display style, Auto Caps/No caps, Case Sensitivity, etc. )
Basic Usage
Wrap code blocks with <pre lang="LANGUAGE" line="1" file="download.txt" colla="+"> and </pre>
Possible Parameters:
lang="LANGUAGE"–LANGUAGEis a GeSHi supported language syntax.file="download.txt"– Thefilewill create a code downloading attribute.line="N"– TheNis the starting line number.colla="+/-"– The+/-will expand/collapse the codebox.line,file,collais optional.
Installation
1. Upload WP-CodeBox.zip to your WordPress plugins directory, usually `wp-content/plugins/` and unzip the file. It will create a `wp-content/plugins/WP-CodeBox/` directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. Go to Option->Wp-CodeBox set default setting.
4. Create a post/page that contains a code snippet following the [proper usage syntax]
Frequently Asked Questions
When activating the plugin, popup the error: “Fatal error: Cannot redeclare class GeSHi in ##/wp-content/plugins/wp-codebox/geshi/geshi.php on line 158”?
Answer: disactivate other Gashi based syntax highlighter plugin first.
Screenshots
1. PHP, no line numbers. View Code PHP
| <div id=”foo”> <?php function foo() { echo “Hello World!\\n“; } for (\$i = 0; \$i < 10 $i++) { foo(); } ?> </div> |
2. Java, with line numbers, collapse codebox.View Code JAVA
| 1 2 3 4 5 | public class Hello { public static void main(String[] args) { System.out.println(“Hello World!”); } } |
3. Ruby, with line numbers starting at 18, downloading feature. Download ruby.txt
| 18 19 20 21 22 | class Example def example(arg1) return “Hello: ” + arg1.to_s end end |
4. Administration interface in WordPress.
Usage
**Example 1: PHP, no line numbers**
<pre lang="php" line="n">
<div id="foo">
<?php
function foo() {
echo "Hello World!\\n";
}
for (\$i = 0; \$i < 10 $i++) {
foo();
}
?>
</div>
</pre>
**Example 2: Java, with line numbers, collapse codebox**
<pre lang="java" colla="-">
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
**Example 3: Ruby, with line numbers starting at 18, code downloading(ruby.txt)**
<pre lang="ruby" line="18" file="ruby.txt">
class Example
def example(arg1)
return "Hello: " + arg1.to_s
end
end
</pre>Conclusion
Highlighting can serve various purposes. I can’t remember that highlighting certainly helped me write clean, correct code, or even prevented me from making a mistake or typing. It can surely provide a pleasant feeling, however in which you can ‘feel good’ about your code differently. For languages such as English and Chinese, learning can help.