The main subject of this blog will be web development and feature some interesting articles and tutorials ranging from PHP and jQuery to HTML and CSS. The problem I was facing when I built this theme was the lack of an awesome code highlighter plugin. I just couldn’t find one that was working for me.

I thought maybe more people were looking for a plugin that simply publishes codes that look great. I started to write my own, and the FV Code Highlight plugin was born and now open for the public. The features are plain and simple, read on.

Description

This plugin supports the highlighting of PHP, HTML, CSS and more. The default tag-highlighter color scheme uses the same colors Adobe’s Dreamweaver is using. This makes it easy for your visitors to recognize what type of codes you wrote. These colors can be changed to your liking in the WP Admin section of your blog.

Features

• Easy to use
• Renders PHP, HTML, CSS, XML, Javascript and more
• Customizable look of the code boxes

How to use this plugin?

1. Upload the folder fv-code-highlighter to the /wp-content/plugins/ directory.
2. Make sure the cache dir /wp-content/plugins/fv-code-highlighter/cache is writable by your webserver.
3. Activate the plugin through the ‘Plugins’ menu in WordPress.
4. Choose your preferred settings on the options page: WP Admin > Appearance > Code Highlighter.
5. Place your code between <pre lang=codetype>...</pre> tags to use the highlighter.

Example

General Code

<pre>...</pre>:

extension String {

    var banana : String {

        let shortName = String(characters.dropFirst(1))

        return "\(self) \(self) Bo B\(shortName) Banana Fana Fo F\(shortName)"

    }

}

let bananaName = "Jimmy".banana

CSS Code

<pre lang="css">...</pre>:

/* Comment */

@import url("main.css");

h3, .head2 {

    font-family: "Sans-Serif";

    font-weight: bold;

    color: #336699 !important;

}

@media screen, print {

    pre { margin: 0px 10px 10px; }

    h1 { font-size: 14px; padding-top: 10px; }

}

(x)HTML Code

<pre lang="html">...</pre>:

<style type="text/css">headline {font-size: 24pt;}</style>

<!-- Comment -->

<td>

    <a href="link">Plain Text &nbsp;</a>

    <img src="image" alt="" width="15">

    <form action="action.php" style="border: 1px solid #eee;">

        <input type="submit" value="Press Me"> 

    </form>

    <p>Text</p>

</td>

<script type="text/javascript">

if (document.getElementById('hi')) {

    window.alert('Hello World!');

}

</script>

JavaScript Code

<pre lang="javascript">...</pre>:

/* JavaScript */

function displayWords(arrayWords)

{

    for (i=0; i < arrayWords.length; i++) {

        // inline comment

        alert("Word " + i + " is " + arrayWords[i]);

    }

}

var tokens = new Array("Hello", "world");

displayWords(tokens);

PHP Code

<pre lang="php">...</pre>:

<?php

/* Connect to a MySQL database using driver invocation */

$dsn = 'mysql:dbname=testdb;host=127.0.0.1';

$user = 'dbuser';

$password = 'dbpass';

try {

    $conn = new PDO($dsn, $user, $password);

    $sql = 'SELECT name, color, calories FROM fruit ORDER BY name';

    /* @var array $row */

    foreach ($conn->query($sql) as $row) {

        displayFruit($row['name'], $row['color'], $row['calories']);

    }

} catch (PDOException $e) {

    echo 'Connection failed: ' . $e->getMessage();

}

?>

Bugs

If you find any bug in the latest version of this plugin, I hope you’d be so kind to tell me about it. This will only improve the plugin, which is better for the users! You can do this on the bug reports forum.

Help Needed?

If you need any help, or have problems with this plugin, please create a post on the support forums.

Plugin Info

AUTHOR: Frank Verhoeven
AUTHOR URL: https://frankverhoeven.me/
CURRENT VERSION: 2.1.2
WORDPRESS VERSION: 4.0+
PHP VERSION: 7.0+

Download

DEMO: Live Demo
DOWNLOAD: FV Code Highlighter

Support

If this plugin is helpful to you, please consider supporting it! You can help it’s development by making a small donation, or promote it by putting a link to this page on your site. Appreciate it!

Support the Plugin