Best Practice Displaying SourceCode Into WP Blog Post

Who do WP blog or usually do writing online mostly via WordPress, I believe they already know about the techniques how to show code on a post. WordPress made this thing very easy by just putting a tag starting and ending of the code content. The tag also do support multiple code language like HTML, CSS, PHP, JS etc. what’s not!

Again I am saying, this is an old topic but someone recently asked me how people do this, so I thought to write a details post and share them the link. So please expert WordPressians are requested to ignore this 🙂

Process / Tag:

The tag name is [code] and with a “language” class as well as some other attributes for an extend use like highlight a specific number of line or tag or class etc.

Simply just put your SourceCode element into [code] tag.

Example:

If you want to show few lines as a code in post, you have to write those like-

sourcode-posting-on-wp

If you use same tag or techniques on your post, your SourceCode will be displayed as we write them on a text editor like:

<h2 align="center">Best Practice Displaying SourceCode Into WP Blog Post</h2>

The code tag will support a lot of other coding languages. Here the few name:

  • 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

There is a wide supported configuration parameters that shortcode will support.

Example:

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

Hope this information will help you out to post SourceCode on WP post. Any issue or imperfection, please comments below.

Original Source: https://en.support.wordpress.com/code/posting-source-code/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s