• Home ››
• Content Management
• ››Code Highlighter

Code Highlighter

You can paste in your raw code syntax and ProProfs automatically formats them to look pretty and readable.

Without highlighting, raw code appears as a bunch of plain black text that can be hard to read. But with code syntax highlighting, ProProfs automatically find the code, detect a language, and format it. Whether you want to add code examples to a page or are creating developer documentation, API guides; ProProfs simplifies the process for you. 

// Syntax highlighting makes your code snippets beautiful and readable 

var setArray = function(elems) 
     this.length = 0;
     push.apply(this, elems); 
     return this; }

• Available Languages
• How to Use
• Editing
• CSS Conflicts (sites created before March 5, 2014)
• Examples

Available Languages

Code syntax highlighter currently supports 22 programming languages: 

Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective C, PHP, Perl, Python, Ruby, and SQL.

How to Use

1. Edit the page, where you want to add the code syntax. 
2. From the toolbar select Insert > Code Highlighter.  
   
3. The Code Highlighter dialog window will open. It is where you will paste your raw code. Do not paste the raw code directly into the editor as it will not work.
4. Copy the raw code from your source, and paste it into the dialog window .
    
5. The Code Language drop-down menu will default to Auto detect. When Auto detect is selected, the system will try to automatically detect the programming language. In most cases it is successful. However, there is a chance an error in formatting could occur. To prevent this you can explicitly select the code language from the drop-down menu. For example, if you are adding a code syntax in Ruby, you will select Ruby from the drop-down menu. 
6. Select the Format style for the code highlighter. There are currently 44 different styles to choose from, including some popular choices like Google code, Github, and Xcode.
7. Once you are finished, select OK to insert the code syntax into the editor.

Editing

If you need to edit a code snippet, you can make changes directly in the editor. However, if you want to add more code or change the format style, then you will need to right click on the code syntax and select Edit Code Highlighter. This will open the dialog window for editing.

CSS Conflicts

• If you created your site before 3/6/2014 and plan to use this feature, then you will need to update your site's CSS. 
• To edit the CSS, press the toolbar button. An overlay will appear displaying all of your site's CSS.
• Locate the CSS block .computer_code, code and delete the word "code" and select OK to save.
  

Examples 

Here are a few examples:

Ruby

class A , 'test' + ?12)
      answer = valid?4 && valid?CONST && ?A && ?A.ord
    end.join
  end

  def [](index) self[index] end
  def ==(other) other == self end
end

anIdentifier = an_identifier
Constant = 1
render action: :new

str =~ /^(?:foo)$/
str =~ %r{foo|bar|buz$}
str =~ %r!foo|bar$!
str =~ %r[foo|bar$]
str =~ %r((foo|bar)$)

HTML

Title

PHP

require_once 'Zend/Uri/Http.php';

namespace LocationWeb;

interface Factory
{
    static function _factory();
}

abstract class URI extends BaseURI implements Factory
{
    abstract function test();

    /**
     * Returns a URI
     *
     * @return URI
     */
    static public function _factory($stats = array(), $uri = 'http')
    {
        echo __METHOD__;
        $uri = explode(':', $uri, 0b10);
        $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
        $desc = 'Multi
line description';

JSON

[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}
  }
]

Related Articles:

CSS
Editor Toolbar
Links