Highlighting Code in WordPress

Hi to Everyone,

I am not convenient in posting a blog which contains some commands,languages,source-code etc., For this i have explored some concepts to rectify this problem.

I got <pre> tag to highlight the text which is preformatted tag. So it is very useful to highlight the text We can use <pre > tag in two ways

1st way:

When you writing the post in above to an input window you can see two called “Visual” & “HTML” as shown in the figure you can click in the HTML page. It will takes you to HTML editable page in that you can add the <pre> tag </pre>.

(Figure-1)

For Ex:

<pre>
bala@bala-desktop:~$ pwd
/home/bala/Desktop
</pre>

Output:

bala@bala-desktop:~$ pwd

2nd Way:

Instead of adding <pre> tag in HTML editor you can just select the text what should be highlighted and simply select the preformatted option contains in (Kitchen sink). As default that tool bar is in hide, we can make it visible by using the short cut key Shift + Alt + Z.

Just select the text and click the preformatted option, for this we can do it in Visual tab. Now you can click preview option to see the effect.

I had a problem, now this <pre> tag is not working in my theme as working normally in other themes. Then only i understood that it is the work of theme builder. In my blog if i use the <pre> tag means font will only change the background area remains same. Thats the issue….

I can fix this issue manually by adding the background color to the post (i.e.) Here is the code add this code in your HTML area as shown in the (figure-1). Then type the following <div> tag before your code here pwd command is my content so i have used the div tag at starting and ending. You can change the background color depends upon your theme.

Sample:

<div style=”color:white; padding:15px; background-color:black;width:600px; font-family:comic sans ms;”>
bala@bala-desktop:~$ pwd
</div>

In this <div> tag we change Font colour, Background Colour, Width of the Background, Padding, Font name for your choice.

Ex:

bala@bala-desktop:~$pwd

One more option to paste your code which is useful on posting your blog with some programming and scripting language.

Syntax:

The following languages are supported:

  • actionscript3
  • bash
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

In this too am having problem, in my theme it has more line spacing between each line So it seems ugly. That image is stated below, I can fix this problem only by changing my theme, Still I am searching to solve this problem without changing the theme.

Hope you can get idea to highlight your code from any of the way which is explained above.

Thank You

With Regards,
V. Balakrishnan

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s