crayon – WordPress with syntax highlighting

Many WordPress blogs relate to topics related to software development projects or web application development. It is not uncommon for code examples to be required to present the content clearly. However, the themes used seldom have ready-made formatting information for displaying the code fragments. It is possible to format these examples with your own CSS information, but it is also tedious, above all if these examples are to be displayed correctly across languages, for example proportionately for a mixture of HTML, JavaScript and PHP.

→ Índice de contenidos

crayon

Syntax highlighting

The WordPress extension “crayon” provides a remedy here, as it provides syntax highlighting for a large number of different languages. A selection of the probably most frequently used languages ​​for which markup highlighting exists can be found in the following list:

  • C / C# / C++
  • CoffeeScript
  • CSS
  • HTML (XML/XHTML)
  • Java
  • JavaScript
  • PHP
  • python
  • ruby

In addition to the languages ​​listed here, the plugin supports many more syntaxes.

Additional functions

In addition to pure highlighting, the WordPress extension offers a few more functions, which clearly sets it apart from comparable plugins in terms of quality.

For example, particularly important Lines of code marked individually or as a range to emphasize the essence of the example without neglecting the overall context.

the Start line number The view generated for the rendering can also be set manually to realistically replicate the specific section of code.

Furthermore, a new line be set, of the optional automated line numbering taken into account and no "new" line is generated. This emulates the usual behavior of a code editor.

This emulation can be done by choosing some default templates for syntax highlighting using the common formatting of well-known editors be reinforced. In this way you get a code view as you know it from your personal favorite text editor.

Finally one can title bar can be labeled as desired for the simulated "editor window". This can also contain some other functions, such as opening the code in a new browser window (simulated view of the "page source code"), switching the line break or dynamically showing and hiding the line numbers.

One Numerous other setting options completes this plugin functionally.

The result

As an output, the plugin creates a pre-formatted code block that is embedded in the article source text and contains all the formatting information that has been set:

    <header class="entry-header">
        <?php if ( is_single() ) : ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
        <h1 class="entry-title">
            <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
        </h1>
        <?php endif; // is_single() ?>
    </header><!-- .entry-header -->

The best thing about the output is that it doesn't generate a static image, but a markable string of characters that can ultimately be copied from the browser and pasted back into your own editor. This gives readers of the article the opportunity to try out the code section presented themselves.

More sources


Conclusion

There is no easier and more convenient way to integrate code examples into a WordPress article. In our view, this WordPress plugin is one of the most valuable tools available for free on the web. We are therefore pleased to be able to present and recommend this tool to you as an ambitious blogger. We wish you every success with the application and positive feedback from your readers!

Did you like this article? Then they are happy to rate the article or share it with people who may also find it useful – simply via Twitter or Facebook or Google+.

Interested in future hosting news? Then you can conveniently subscribe to the blog posts via RSS feed, or you can also like our Facebook page.

The subscription functionality on Facebook also provides you with the latest blog post and lots of other information about hosting in general, but also about Host Europe at any time.

Do you have any suggestions or suggestions for changes? Comment on our posts, we look forward to your input!

Leave a Reply

Your email address will not be published. Required fields are marked *

Go upChange privacy settings