My Choiche of WordPress Plugins

 

WordPress ouImage result for plugint of the box is already a very good blogging engine. However there are still a lot of features, lacking in the standard version if we want to have a smooth editing workflow and good user experience for the reader. WordPress takes care for the necessary extension of functionality with its plug-in framework and there are hundreds of plug-ins available.
Here is quick run down of the plug-ins that I use. Since I don’t want to dive into WordPress programming, but rather use the product to run my blog and website without much trouble, I am looking only for standard mainstream plugins with a wide usage. Like in many other fields, this strategy normally yields quick success with little problems. 

Pasting Images from the Clipboard

Clipboard Contents

Pasting an image directly from the clipboard to the WordPress editor is not a standard feature. However there is a plugin for this, called Image Elevator. The Clipboard Image to the left was inserted with this plugin. It provides some options to position the picture within the post and an editor to change the description, size and quality of the image. The image is stored in the WordPress upload folder with a generated filename.  The generated html code for this image looks like this.

There is also an premium version of this plugin with offers features like compression and renaming. Here are the Links to the plugin

Links to the Image Elevator Plugin
Version URL
Standard Version https://wordpress.org/plugins/image-elevator/
Premium Version https://codecanyon.net/item/image-elevator-for-wordpress

Syntax Highlighting

WordPress is a CMS that has a strong stance in design and art related business. But what does it have to offer for IT related websites? One thing that is mandatory for IT blogging is a good presentation of code.
There are several options to create syntax highlights in WordPress. We will have a look at two of them.

Wordpress Syntax Highlighter
Plugin Technique Description
SyntaxHighlighter Evolved Java Script 50.000+installs
Crayon Syntax Highlighter PHP und jQuery 50.000+ installs

There are several blog posts that cover syntax highlighter. The article „Top and My Favorite Syntax Highlighter WordPress Plugins“ recommends the highlighter Crayon and Evolved, stating that these are the best. 
The article „10 Best WordPress Syntax Highlighter Plugins“ compare 10 different highlighter without giving a final recommendation.
My first impression is that the Crayon Highlighter is more advanced but also more complex to handle. That why I chose the Evolved Highlighter for a first try. The documentation says that the code just needs to be pasted in to editor. 

The Evolved Highlighter

I have a small java class that i use just for highlighter testing purposes. The code can be pasted directly into the post text, using one of several short codes. 

Testing Evolved Highlighter with Java Code:


// Syntax Highlighting Test File For Java
// Comment Line

/*
 * HelloWorld Using Swing
 */
import javax.swing.*;        

public class HelloWorldSwing {
    /**
     * Create the GUI and show it.  For thread safety,
     * this method should be invoked from the
     * event-dispatching thread.
     */
    private static void createAndShowGUI() {
        //Create and set up the window.
        JFrame frame = new JFrame("HelloWorldSwing");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Add the ubiquitous "Hello World" label.
        JLabel label = new JLabel("Hello World");
        frame.getContentPane().add(label);

        //Display the window.
        frame.pack();
        frame.setVisible(true);
        
        a = 1000;
        // unclosed string
        System.out.println("test);
    }

    public static void main(String[] args) {
        //Schedule a job for the event-dispatching thread:
        //creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}


There are several setting that can be customized using short codes. The  visual editor cannot be used to paste the code into the blog because it destroys the indents. Therefore we have to switch to text view. After that we can switch back to the visual editor. I like the highlight feature which can be used to highlight lines of code. However this is difficult to do from within the WordPress editor, because it does not show the line numbers, so we have to count or guess which lines to highlight.
There are problems with the menu bar. Although I explicitly enabled it in the attributes, it does not show up. Probably a bug or an incompatibility with my version of WordPress. 
I rather turn to the next option in my list.

The Crayon Highlighter

We use the same example file for testing the Crayon Highlighter. Crayon offers a  Tag Editor to paste and control the code. This can also be done in the visual editor, because it opens an extra editor window.

Testing the Crayon highlighter with java code:

I prefer the tag editor from the crayon plugin because it is much easier to use and to control the code fragments. It also supports highlighting of code lines but doesn’t show line numbers in the tag editor, so this process also is more complicated than it could be.
In the next step I want to test the handling of shell commands, that I often use to copy and past into shells. I use the automatic language detection and  restrict the height of the code box to 300 pixel. This brings up a scroll bar.

The result is really nice. If the reader wants to see the full code, it can be opened in an additional browser tab with just one click. Sometimes a want to show the long shell output or complete log files. The feature to open in a new window can be very helpful here. We present the log file in a scroll box   but the reader can open it full screen browser view.

Now this is a shell output with 300 lines which is presented  in the blog article in a scroll box. In the visual editor however there is no scroll box. The whole text is shown there, which makes the handling of large code files impractical. 
However, there is the option to include the code from a file. We want to test this with a log file, and see how it gets presented.