Category: Beginner
If you are a programmer and use your blog to post your day to day coding tasks, you would definitely have found the need to publish native code in your blog at some point or the other. You have come to the right place.
Although, there are many ways to do this, in this post, I would tell you about two ways in which you can publish code and highlight the syntax. One is to use the code snippets that are in built in WordPress and other would be using the popular service Github.
1. Pasting Source Code in WordPress:
Although WordPress won’t allow you to directly put HTML/JavaScript/PHP code inside your post, it provides a way in which you can put up the source code for viewing purposes. A shortcode has been provided in WordPress precisely for this.
To use it, you need to wrap your code around the code shortcode, specifying the language in the opening tag. For instance,
[ code language=”python” ]
from urllib import urlopen
webpage = urlopen(‘www.webriti.com’).read()
[ / code ]
This code snippet produces the following output.
The languages which are supported (in the format of values to be entered as the language parameter) are actionscript3, bash, clojure, coldfusion, cpp, csharp, css, delphi, erlang, fsharp, diff, groovy, html, javascript, java, javafx, matlab (keywords only), objc, perl, php, text, powershell, python, r, ruby, scala, sql, vb and xml.
Clicking on the code snippet lets you edit it (without saving it, of course) like a text area and copy the necessary code in raw format.
The configuration parameters that you can use with the code short code to customize the output are described below.
-
autolinks (true/false) URLs in your code snippet would be clickable. Default- true.
-
collapse (true/false) The code snippet would be collapsed on page load if set to true. Default- false.
-
firstline (number) The line number that the first line of your code will have. Default- 1.
-
gutter (true/false) Refers to the visibility of the line numbering on the left. Line numbers are hidden if set to false Default- true.
-
highlight (comma-seperated list of numbers) The line numbers that are to be highlighted are put here. Eg. highlight = “2, 3, 7”
-
htmlscript (true/false) HTML/XML code inside your code snippet would be highlighted. This is useful when you put HTML parts within PHP scripts. Default- false.
-
light (true/false) Gutter (line numbering on the left) and toolbar (below) would be hidden if set to true. Default- false.
-
padlinenumbers (true/false/integer) Refers to padding of the code. True will lead to automatic padding and false leads to no padding. An integer would force that much amount of padding. Default- true.
-
title (string) Used to set a title to your code snippet. Default- null.
Installing the plugin:
Note that this is available to WordPress.com users by default. However, this feature is available as a plugin to those who use the CMS from WordPress.org. You can install it by visiting the plugin page.
Alternately, you can search for “SyntaxHighlighter Evolved” in Plugins > Add New. After installation, activate the plugin to use the feature.
2. Using Github Gist:
Github is a social coding community which can be used to host repositories managed by git, a distributed version control and code management system.
Github Gist is a service where you can save code snippets. Although there is no need for you to be logged in to Github to use the Gist feature, it is recommended that you log in to control and claim your gists.
Go to Github Gist and you will be greeted by a rich text editor.
Enter a description, select the language and name the file. Paste in your code in the space available. You can either create a Public Gist or a Secret Gist. Creating a Secret Gist would hide it from search engines, but give access to anyone with the URL.
On saving the gist, you can embed it in your post.
Select the portion highlighted in the screenshot above and paste it in your post wherever you want it to appear. Make sure you select the “Text” tab in your WordPress editor and not the “Visual” tab.
After you paste the post, you can check the preview to make sure everything is working fine.
Note: You need to turn off your rich text editor in some cases to make sure this works and the src attribute of the script tag doesn’t get stripped off.
You don’t really need to worry about your code in Github as you would remain the owner and it won’t get deleted (unless it’s spam). Big open source companies host their code on Github and it just proves that Github is a great platform.
Pros and Cons:
There are many advantages of using the Github Gist. First, it provides a far more number of language options as compared to the WordPress code plugin. Editing the code is very convenient as you can do it through your Github profile and it would get reflected in your post(s). Another big advantage is that your code is available in Google Code Search (if you made a Public Gist), and you can selectively hide it from search engines by making a Secret Gist.
There are some disadvantages too. If you use Github Gist, you would find that every single time, a new JS file is included into your post. The disadvantage is that page load stalls until the Javascript has loaded (that is why, programmers keep JS files at the bottom of pages). Secondly, you can’t really customize the Github Gists in terms of the line numbers on the left, or the toolbar below.
That being said, both of these are great ways to present your code snippets and you would do well using either of the ways that have been mentioned in this post according to your needs. Happy coding!
Like it