Tuesday, December 6, 2011

Syntax Highlighter wordpress

How to hightlight codes you published in wordpress.com?

Here is the solution:

You have to post your code in between the tag. Write down your language name replacing your_language. That's all. :)

[sourcecode language="your_language"]
//your code here
[/sourcecode]

Here is an example of how to represent a python code in WordPress:
[sourcecode language="python"]
import turtle # allows us to use the turtles library
window = turtle.Screen() # creates a graphics window
rightAngle = turtle.Turtle() # create a turtle named rightAngle
rightAngle.forward(150) # tell rightAngle to move forward by 150 units
rightAngle.left(90) # turn by 90 degrees
rightAngle.forward(75) # complete the second side of a rectangle
window.exitonclick() # graphics window wait for your click to exit
[/sourcecode]

This will look similar to this:
import turtle # allows us to use the turtles library
window = turtle.Screen() # creates a graphics window
rightAngle = turtle.Turtle() # create a turtle named rightAngle
rightAngle.forward(150) # tell rightAngle to move forward by 150 units
rightAngle.left(90) # turn by 90 degrees
rightAngle.forward(75) # complete the second side of a rectangle
window.exitonclick() # graphics window wait for your click to exit

The language parameter in the tag controls how the code is syntax highlighted. Default language parameter
is "text"[No highlighting].

At this moment wordpress.com is supported the following language:

  1. actionscript3
  2. bash
  3. coldfusion
  4. cpp
  5. csharp
  6. css
  7. delphi
  8. erlang
  9. fsharp
  10. diff
  11. groovy
  12. html
  13. javascript
  14. java
  15. javafx
  16. matlab (keywords only)
  17. objc
  18. perl
  19. php
  20. text
  21. powershell
  22. python
  23. r
  24. ruby
  25. scala
  26. sql
  27. vb
  28. xml

The shortcode also takes variety of parameter to customize output, but they are optional:


  1. autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  2. collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Defaults to false.
  3. firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  4. gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  5. highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19?.
  6. htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
  7. light (true/false) — If true, the gutter (line numbering) and toolbar (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
  8. padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  9. toolbar (true/false) — If false, the toolbar containing the helpful buttons that appears when you hover over the code will not be shown. Defaults to true.
  10. wraplines (true/false) — If false, line wrapping will be disabled. This will cause a horizontal scrollbar to appear for long lines of code.


Courtesy: en.support.wordpress.com

No comments:

Post a Comment