Syntax highlighting for code

Writing code in a Hypotheses article is already possible. To indicate that part of your content is code, write it in a “Preformatted” block or a “Code” block. You can also write code in the middle of a text paragraph by using grave accents : start with a grave accent, then your code, and finish with another grave accent – what is between the two grave accents should then be visually identified as code. To exit the code tag, press the right arrow on the keyboard (as if to exit a hyperlink, bold or italic tag). For a code starting with a letter that can be accented, add a space after the opening accent.

What is new is that Hypotheses now has a plugin, WP-Syntax, dedicated to syntax highlighting of the code contained in a post. This plugin is based on the free software Geshi, which allows to colorize the syntax of many computer languages. The plugin retains the formatting of the code and allows it to be displayed with or without line numbers.

The WP-Syntax plugin is hardly compatible with the new WordPress text editor. To use syntax highlighting, we therefore recommend that you continue to use the so-called “classic” editor for articles that require it.

With the “classic” editor, you can signify code by selecting it and clicking on “Preformatted” (Format > Blocks > Pre), or “Code” (Format > Code). The “Pre” format better supports multiple lines of code, frames all selected code in a container, and retains indentation and (non-)line returns. The “Code” format may be preferred when a few code characters are inserted within a text paragraph.

Example of text associated with the "Code" format

Example of text associated with the "Pre" format

How to use syntax highlighting of computer code?

Once the text editor of your article has been switched to text mode, it is a matter of writing your computer code between tags

<pre lang="LANGUAGE" line="1"> and </pre>

LANGUAGE being replaced by the desired computer language.

The “Text” tab is located at the top right of the text editor, next to the “Visual” tab.

Example for PHP language :

<pre lang=”php” line=”1″> my PHP code</pre>

And for R language:

<pre lang=”rsplus” line=”1″> my R code</pre>

The line=”1″ attribute is optional and allows row numbers. If you do not need to display them, you can remove the attribute.

<pre lang=”php”> mon code PHP </pre>

To highlight line 3 of a Ruby code, write:

<pre lang=”ruby” line=”1″ highlight=”3″> my RUBY code</pre>

Featured Image: Photo by rawpixel under Unsplash license

---

---