• Home
  • SEM
    • PPC
    • SEO
    • How To
  • Bangladesh
  • School
    • HTTP
    • REP
    • Bots n’ htaccess
    • Source Code
    • Excel 2010
    • HTML XHTML Entities
    • Gmail Operators
    • HTML & ASCII
  • About
    • Privy
    • About This Blog
  • Contact
  • বাংলা

Saidul Hassan

Digital Marketing Evangelist

Home / School / Posting Source Code — WordPress Support

Posting Source Code — WordPress Support

26 Aug, 2013 By Saidul Hassan · Filed Under: School

Source: http://en.support.wordpress.com/code/posting-source-code/
While WordPress.com doesn’t allow you to use potentially dangerous code on your blog, there is a way to post source code for viewing. We have created a shortcode you can wrap around source code that preserves its formatting and even provides syntax highlighting for certain languages, like so:

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

To accomplish the above, just wrap your code in these tags:

[code language=”css”]
your code here
[/code]

The language (or lang) parameter controls how the code is syntax highlighted. The following languages are supported:

  • 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
  • xml

If the language parameter is not set, it will default to “text” (no syntax highlighting).

Code in between the source code tags will automatically be encoded for display, you don’t need to worry about HTML entities or anything.

Configuration Parameters

The shortcodes also accept a variety of configuration parameters that you may use to customize the output. All are completely optional.

  • autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.
  • 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.
  • 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.
  • 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.
  • title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.

Here’s some examples of the above parameters in action:

This line is not highlighted.
This line is highlighted.
This line is highlighted.
This line is not highlighted.
<strong>This</strong> is a short snippit of <code>code</code> with padlinenumbers set to 4.

And here’s a larger code block to see it all in action. It is set to the PHP language with “htmlscript” enabled and line number 12 highlighted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>WordPress.com Code Example</title>
</head>
<body>
    <h1>WordPress.com Code Example</h1>

    <p><?php echo 'Hello World!'; ?></p>

    <p>This line is highlighted.</p>

    <p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p>

    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>

    <p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

↑ Table of Contents ↑

Credits

Alex Gorbatchev’s SyntaxHighlighter project was used in the implementation of this feature. If you are a WordPress.org user and would like to use this feature on your self-hosted blog, it is available as a plugin.

The following two tabs change content below.
  • Bio
  • Latest Posts
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profileMy Instagram profileMy Pinterest profile

Saidul Hassan

Managing Partner at Up Arrow Consulting
COO at Up Arrow Consulting, MCC manager, & Technical SEO consultant. Certified Google Partners and Microsoft Bing Ads Accredited Professional, Python enthusiast, wannabe SysAdmin. Graduated from School of Management & Business Administration (SOMBA), Khulna University.
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profileMy Instagram profileMy Pinterest profile

Latest posts by Saidul Hassan (see all)

  • How to use PrismJS syntax highlighter on WordPress without plugin - 30 Mar, 2020
  • Download an Entire Website for Offline Viewing - 26 Nov, 2019
  • HMA Pro VPN Setup for Multiple Locations without User/Password Every time in Linux CLI - 14 May, 2018

Share:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Email
  • Print

First published on 26 Aug, 2013 · Last updated 26 Aug, 2013 · Tagged With: wordpress, wp

How to use PrismJS syntax highlighter on WordPress without plugin

30 Mar, 2020 By Saidul Hassan

Download an Entire Website for Offline Viewing

26 Nov, 2019 By Saidul Hassan

HMA Pro VPN Setup for Multiple Locations without User/Password Every time in Linux CLI

14 May, 2018 By Saidul Hassan

How to Search and Delete Files Containing Specific String in Name

27 Nov, 2017 By Saidul Hassan

How to Bulk Rename Video Files based on Resolution, Size etc.

27 Nov, 2017 By Saidul Hassan

Archives

  • March 2020
  • November 2019
  • May 2018
  • November 2017
  • July 2017
  • March 2017
  • February 2017
  • June 2016
  • November 2015
  • July 2015
  • June 2015
  • May 2015
  • January 2015
  • December 2014
  • September 2014
  • February 2014
  • January 2014
  • October 2013
  • September 2013
  • August 2013
  • February 2013
  • January 2013
  • November 2012
  • October 2012
  • September 2012
  • July 2012
  • August 2011
  • June 2011
  • May 2011
  • ♥ Bangladesh ♥
    Log in · Privacy Policy · Contact
    Copyright © 2011 Saidul Hassan

  • DMCA

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.