Simple:Press Documentation

Plugin: Syntax Code Highlighting

Plugin Description

Plugin: Syntax Code Highlighting – This Simple:Press plugin is a great way to highlight program code from many programming languages and is a most beneficial tool if the forum revolves around discussions of program code. It formats and colors the code to facilitates easy copying. Program code syntax highlighting can also be added to blog posts to colorize code segments in the those posts.

Note:
The Simple:Press “TinyMCE Editor” plugin must be installed, activated, and used as the default editor in the forum OR selected for use by the individual forum user / member before this plugin can operate properly.
WARNING:
If another Syntax Highlighting plugins is already being used on the website, it will be necessary to either turn off the options for the forum and blog – or – remove the other plugin.Attempting to use both will most likely result in an error or give other, unpredictable results.

Plugin Features

Installing this Simple:Press plugin adds:

  • A new Syntax Highlighting section in the “Available Plugins – Install Simple:Press Plugins” panel under the forum Admin menu path Forum > Plugins > Available Plugins. From this panel the plugin can be activated, or deleted by the Admin.
  • When properly installed, a new folder in the “forum-plugin” folder named “syntax-highlighting” containing the plugin’s files.

Activating this plugin provides:

  • A change to the new Syntax Highlighting section in the “Available Plugins – Install Simple:Press Plugins” panel under the Admin menu path Forum > Plugins > Available Plugins so the Simple:Press plugin can be deactivated, uninstalled, or have its Options set up.
    • The Options link goes to the “Options – Content Settings” forum Admin panel with a new “Code Syntax Highlighting” section.
    • The “Getting Started” link associated with the “Deactivate/Uninstall/Options” selections should be selected to view the pertinent information regarding the plugin.
  • A new “Code Syntax Highlighting” section in the “Options – Content Settings” forum Admin panel where options associated with the plugin are specified.
    • The forum Admin panel is available from the Admin panel menu by navigating to Forum > Options > Content Settings.
  • If the TinyMCE editor is selected for use, above the text input section of the “Add Topic” or “Reply to Topic” post forms the post author sees a new icon for specifying the programming language of text/code selected within the post and causing the text/code to have its syntax highlighted.

There are no new permissions added to the permission sets due to this plugin.

Plugin Requirements

Simple:Press version 5.5.2 and above is required.

This plugin requires the Simple:Press TinyMCE Editor plugin be installed, activated, and selected as the default editor for the forum by the forum Admin or selected for editing by the forum user via his/her profile.

The “Syntax Code Highlighting” plugin must be installed, activated, and its options set before it is operational.

As part of the installation, a “Syntax Highlighting” section is added to the Plugin Management panel under the admin menu Forum > Plugins > Available Plugins. From this panel the plugin can be activated, deactivated, deleted, uninstalled, or its options set using its “Activate/Delete” and “Deactivate/Uninstall/Options” selections.

  • The Options link goes to the goes to the “Options – Content Settings” forum Admin panel with a new “Code Syntax Highlighting” section.

There are no new permissions added to the permission sets due to this plugin.

The plugin does not have template tags so no recommendation regarding Custom or Child Themes is being made.

Plugin Installation and Activation

Please see Using Plugins on how to obtain and install the TinyMCE Editor plugin.

Please see Using Plugins on how to obtain and install this Simple:Press plugin.

  • Whatever method is used to add the Simple:Press plugin, the folder that should have been added to the forum plugin folder is named “syntax-highlighting“.
  • If using the “Simple:Press Upload Plugin – Upload a Simple:Press Plugin” panel at the forum Admin menu Forum > Plugins > Plugin Uploader, the folder to browse for after downloading it from the Simple:Press site is “syntax-highlighting.zip” before clicking the “Upload Now” button.

As mentioned there the default location for Simple:Press plugin folders is …/wp-content/sp-resources/forum-plugins. If this path is changed, it is important to note that the plugin’s folder and its content need to reside in the forum plugins folder wherever it has been moved and however it has been renamed. See Storage Locations for more information.

Activation is accomplished from the Admin Dashboard panel menu by selecting Forum > Plugins > Available Plugins from the drop down forum Admin menu. On the “Available Plugins – Install Simple:Press Plugins” panel select the Syntax Highlighting plugin and click on “Activate”. The “Activate/Delete” label changes to “Deactivate/Uninstall/Options” with a “Getting Started” Link.

  • The “Getting Started” link associated with the “Deactivate/Uninstall/Options” selections should be selected to view the pertinent information regarding the plugin.

To deactivate the plugin, click on “Deactivate”. The “Deactivate/Uninstall/Options” label changes to “Activate/Delete”.
To re-activated the plugin, click on on “Activate”. The “Activate/Delete” label changes to “Deactivate/Uninstall/Options”.

Plugin Administrative Options

After activation, a) on the aforementioned “Available Plugins – Install Simple:Press Plugins” panel, click “Options” on the Syntax Highlighting plugin section or b) under the Options entry on the Forum menu on the left side forum Admin page click the Content Settings sub-menu item to get the “Options – Content Settings” forum Admin panel with the new “Code Syntax Highlighting” section.

Code Syntax Highlighting Section with Options Set

In this example, code syntax highlighting is selected for both forum and blog posts. The programming languages to be supported by the TinyMCE code syntax highlighting capability are html, apache, css, javascript, and php.

    • Code Syntax Highlighting Section Selections

Simple:Press has built in support for the highlighting and formatting of program code in a wide variety of popular and common languages.

      • Use Syntax Highlighting in Forum Posts
      • To use program code syntax highlighting in forum posts, select the check box to the left of “Use syntax highlighting in forum posts”.
        • The check box is selected if it contains a green check mark.
      • If there are no other selections to be made on the panel, click the “Update Content Options” button at the bottom of the panel to save the selections.
        • Otherwise, proceed to the next selection.

 

      • Use Syntax Highlighting in Blog Posts
      • To use programming code syntax highlighting in blog posts, select the check box to the left of “Use syntax highlighting in blog posts”.
        • The check box is selected if it contains a green check mark.
      • If there are no other selections to be made on the panel, click the “Update Content Options” button at the bottom of the panel to save the selections.
        • Otherwise, proceed to the next selection.

 

      • Programming Languages for Syntax Highlighting

The code languages to be supported through the editor for syntax highlighting can be selected. Note that only the TinyMCE editor offers toolbar support for this feature.

The Available programming languages for code syntax highlighting are:

  • apache
  • applescript
  • asm
  • bash-script
  • bash
  • basic
  • clang
  • css
  • diff
  • html
  • java
  • javascript
  • lisp
  • ooc
  • plain
  • php
  • python
  • ruby
  • sql
  • yaml

 

    • In the text box to the right of “Languages (comma separated):”, insert the designation as shown in the table above for the program languages to be supported by the TinyMCE editor with code syntax highlighting.
      • The names in the table above must be used exactly including be specified in lower case.
      • The languages can be reordered to suit the requirements of the website.
      • Separate the languages with a comma “,” character.
    • If there are no other selections to be made on the panel, click the “Update Content Options” button at the bottom of the panel to save the selections.
      • Otherwise, proceed to the next selection.

For this plugin to operate properly, the TinyMCE editor must be the editor selected for use either by the forum Admin as the default or by the individual forum user / member.

  • See the Plugin Usage section of this Codex page for forum user / member selection steps.
  • The forum Admin can select which of the installed editors is to be used as the default editor on the “Options – Global Settings” Admin panel. The process is discussed below and on the Plugin: Editors Codex page.
    • Selecting the TinyMCE Editor as the Default Editor
    • Navigate to Forum > Options > Global Settings to see the “Options – Global Settings” Admin panel with its “Post Editing” section.
    • Scroll to the “Post Editing” section.
    • Under “Select Default Editor:”, click on the check box to the left of “Rich text (TinyMCE) to use the TinyMCE editor as the default.
      • The check box is selected if it contains a green check mark.
    • If there are no other selections to be made on the panel, click on the “Update Global Options” button at the bottom of the panel to save the selections.

To be complete for multilingual forums, the language translation files for this plugin should be installed or downloaded/properly placed in the appropriate forum-language folder for SP plugins using one of the procedures below in the “Plugin Language Translation” section of this page.

Plugin Language Translation

A plugin may not have language translation files, but in general each Simple:Press plugin has its own language translation files each with multiple pages for translating the forum plugin’s message strings.

Forum Plugin translation files are to reside in a unique forum folder location as defined by the “Simple:Press Plugin Language Files” entry on the “Integration – Storage Locations” forum Admin panel available through the forum Admin menu at Forum > Integration > Storage Locations.

  • The default location for forum plugin translation files is the folder “…/wp-content/sp-resources/forum-language/sp-plugins”.

Information regarding downloading language files, “mo’ language file placement, and translation (language localization) is found at Localization.

WARNING: On the Localization page, the Language Translation “.mo” Files Overview should be reviewed and well understood for naming convention and language translation file placement.

More information is available regarding translation files at Simple:Press Translations. which is the repository for Simple:Press language translation files. On the base page, select the “Getting Started Guide” link for basics about it’s use. On that page, select the “register a username here” link to obtain a password to the site. Use the “Contact Form” link to request the desired language if it is not currently available. The “Contact Form” link may also be used to volunteer to be a validator for a translation project.

This plugin’s available language translation files with translation statistics, and message translations can be viewed at Syntax Highlighting within the repository for Simple:Press language translation files.

  • Installing this Simple:Press Plugin’s Language Translation “.mo” files
    The plugin’s language translations files for each language can be correctly located in two ways.
  • Using the Admin Word:Press “Site Language” and Simple:Press “Language Translation” Features
    WARNING: On the Localization codex page, the Language Translation “.mo” Files Overview should be reviewed and well understood for naming convention and language translation file placement.
      • Under the “Language Translation Selection Sequences” heading, the “Coordinated Language Translation File Download Using the Simple:Press ‘Language Translation’ Selection” section, follow the instructions at “Adding its Translation File(s) After Downloading/Activating a Simple:Press Theme or Simple:Press Plugin”.
        • Follow the instructions to select the “Site Language” and then get to the admin page with the “Integration – Language Translations” section where there should be an entry for “Syntax Highlighting” along with an “Install” button.
        • Click on the “Install” button for this plugin to install the language translation file for the current “Site Language” language.
          • Note: If the message “No Translation Project Exists” is displayed rather than the “Install” button, a translation file for that language could not be found in GlotPress at this time. Consider posting in the Simple:Press forum if it is felt there needs to be one added.
        • Be sure to verify the locale (filename) for the “.mo” file matches the language code for the language as referenced in the “Warning” above. If it does not, change it to match.
        • As called out in the section, continue to change the “Site Language” language and repeat the process until all desired translation files for this plugin have been installed.

     

  • Manually Finding and Storing Simple:Press Plugin’s Language Translation ‘mo’ files
  • WARNING: On the Localization codex page, the Language Translation “.mo” Files Overview should be reviewed and well understood for naming convention and language translation file placement.
  • After reviewing the material discussed under the “Language Translation Selection Sequences” heading, the “Manual Installation of Simple:Press Language Translation Files section, follow the steps outlined at “Finding and Storing ANY Simple:Press Plugin’s Language Translation ‘mo’ files”.
  • Each time through the process at the step, “Scroll down the list and click on the name of the plugin whose language files are being sought to see the translation file Version Number available”, substitute “Syntax Highlighting” for the phrase “the name of the plugin whose language files are being sought”.
  • Be sure to verify the locale (filename) for the “.mo” file matches the language code for the language as referenced in the “Warning” above. If it does not, change it to match.
  • Repeat the steps for each language it is desired to have a translation file (french, spanish, etc.) for the plugin on the website.

Plugin Special Notes

This plugin requires the Simple:Press TinyMCE Editor plugin be installed, activated, and selected as the default editor for the forum by the forum Admin or selected for editing by the forum user by selecting it in his profile.

Please see the Plugin: Editors Codex page for more information on the available editors.

Plugin Usage

Forum Admins use the plugin set up the plugin’s options and highlight code syntax in posts after the TinyMCE editor has been selected as the default editor.

Before forum users / members can use the plugin, they must select the TinyMCE editor if is not the default editor selected by the forum Admin. The process is discussed below and on the Plugin: Editors Codex page.

  • Users Selecting the TinyMCE Editor for Posts
  • In the header of the forum page, users select the “Profile” button to be able to view or edit their profiles.
  • Then select the “Options” tab.
  • Finally select the “Edit Posting Options” sub-menu button to see the “Edit Posting Options” items.
  • Under “Preferred Editor:”, click on the check box to the left of “Rich text – TinyMCE” to use the TinyMCE editor.
    • The check box is selected if it contains a green check mark.
  • Click on the “Update Posting Options” button at the bottom of the panel to save the settings.

If the TinyMCE editor is installed, activated, and selected for use and the Syntax Highlighting plugin is installed, activated, and its options set up for use in forum and possibly blog posts, the TinyMCE editor edit options set up by the forum Admin and the Syntax Highlighting edit options are available to the forum user when developing forum posts and possibly blog posts.

    • Using TinyMCE Editor “Code Syntax Highlighting” Option
    • In a forum, click on the “Add Topic” or “Add Reply” buttons to get to their respective forms.
    • Above the text input section of the “Add Topic” or “Reply to Topic” post forms the post author sees:
      • the TinyMCE plugins and edit buttons available in the editor as selected by the forum Admin on the “Components – Editor – TinyMCE Settings” forum Admin panel.
      • the grayed out “Syntax Highlighting” button and its “down arrowhead”.
    • Enter any/all descriptive text desired into the post text input area before inserting any code segment(s) expected to have their syntax highlighted.
WARNING:
Once the code segment(s) have had their syntax highlighted, additional descriptive text can not easily be entered between the highlighted segments unless:

  • some text already exists between the code segments, or
  • the syntax highlighting is undone using the editor’s “undo” button.
    • For each code segment with the post, repeat the following steps.
      • In the appropriate location within the post, enter or paste the code segment to have its syntax highlighted into the post.
Note:
If the Simple:Press “TinyMCE Editor” plugin has been set up to use its “Code” plugin, an alternative approach is to select the “Code” plugin button with its “<>” icon to provide a popup window where the code segment can be pasted.

  • Hovering over the “<>” button provides the message “Source Code”.
      • Within the post, select/highlight the portion (or maybe all) of the code segment to have its syntax highlighted.
        • The “Syntax Highlighting” button and its “down arrowhead” turn black and can now be selected.
      • Click on the “down arrowhead” in the TinyMCE editor button for syntax highlighting (hovering over the button provides the message, “Syntax Highlighter”) to display the drop down menu containing the allowed programming languages to be highlighted.
      • Move the cursor over the program language designation (to highlight it) that corresponds to the highlighted code within the post and click on it to select that language.
        • See the graphic immediately below.

 

    • After the language is selected, a box encloses the code segment to have its syntax highlighted
  • After all the desired code segments have been processed through the above five (5) steps, complete any other portions of the post form.
  • After completing the form, click on the “Submit Topic” or “Submit Reply” button to submit the post.

When the post is viewed after it has been submitted/saved, the code segment(s) will have their syntax highlighted with the appropriate colors.

  • See the graphic immediately below.
  • Clicking on the “VIEW RAW CODE” button above each code segment will provide a popup browser window containing the code.

The TinyMCE editor icon layout may be different than that shown above.

    • Another Description of Using the “Code Syntax Highlighting” Option
    • When creating or replying to a topic enter the text to be highlighted as code then click on the Syntax highlight button.

  • A select code type box will then open and the type of code can be selected.
  • Once selected the text’s appearance will change to show that it has been converted.
  • When the topic is saved the code will be shown differently than the rest of the text in the topic.

Template Tags Used in the Plugin

There are no Template Tags used in this plugin.

Actions and Hooks Used in the Plugin

There are no Actions and Hooks available in Template Tags for this plugin.

There is one (1) other Actions and Hooks available for this plugin.
In file ‘sp-syntax-plugin.php’

  • apply_filters(”sph_syntax_check’, ‘topic’) – Allows modification of the syntax highlighting initialization set up just prior to being output/returned.

Plugin and Template Tag Changelog

Since Simple:Press version 5.5.

Codex page sync’d to code version 5.6.1 and plugin version 2.0.6.

More Topics In SimplePress: Plugins


Copyright © 2006-2019 Simple:Press. All Rights Reserved.