Writing code snippets in wordpress without plugins

The other day I was trying to put some code snippets in a blog entry. At some point, without exactly understand how, I started a two days fight with the WordPress editor.

My blog is in wordpress.com. That means:

  • no plug-ins are allowed.
  • no access to functions.php.
  • no access to the theme’s style.css (It is available only to paying accounts and not to the free service.)

In addition WordPress tends to put tags like <p> and <br> when it feels like it. This is like going to war not only unarmed but naked too.

My requirements are simple but usually end up to frustrating battles.

  1. Code should not be wrapped. Scrollbar should show when required.
  2. Lines should wrap on enter.
  3. Spaces and tabs should honored and not collapsed.
  4. No extra <p> and <br> or any other automatic formatting should be generated.

Fragments of the solution includes:

  • overflow: auto; to enable the scrollbar
  • white-space: pre; to prevent wrapping on white space but allow line breaks. See here.
  • word-wrap: normal; Chrome and IE requires it at least for my theme.
  • line-height: 1; to convince your theme for a more compact code view. Vertical space matters.
  • margin-bottom: 0; if your theme has its own opinion on what constitutes valid typography.

Several solutions in the Internet mention the <code> tag. Let’s try it.

for (i=0; i < N; i++) {
printf("hello world\n"); /* comment should be several spaces away */
}

This has the following problems:

  • Violates requirement 3: It collapses spaces. Note that originally WordPress does not collapse spaces. However, as soon you switch to the WYSIWING editor you are toast. WordPress will collapse your spaces under your feet without noticing. Who could thought that?
  • Violates requirement 4:  WordPress, puts <br> for every enter in the original text resulting in ugly double lines of code.
  • IE Only: Violates requirement 1: It wraps texts on spaces. Who knows why?
  • It needs to be wrapped in a block element like <div> or <blockquote> otherwise the background is not painted properly.

Let’s try <pre> instead:

for (i=0; i < N; i++) {
          printf("hello world\n");        /* comment should be several spaces away */
}

 

This satisfies all requirements. WordPress does not add <br> tags and does not collapse spaces inside <pre>. Scrollbars appears when needed and no wrapping is taking place. Note that your code should start immediately after the <pre> tag if you don’t want weird empty lines in the top of your nice code.

Here is the magic HTML:

 <pre style="overflow: auto; background: black; color: white; margin-bottom: 0; line-height: 1; white-space: pre; word-wrap: normal;">for (i=0; i &lt; N; i++) {
          printf("hello world\n");        /* comment should be several spaces away */
}</pre>

You can check the other examples by viewing the source (Ctrl+U) in your browser or in your browser’s inspector (F12).

Hope that helps.

Advertisements

Author: vasvir

Interested in a wide range of topics from deep learning and big-data to embedded, from web GUI (GWT) to API and code consolidation. Maintainance is also fun for me unlike many other normal people...

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