Formatting: Syntax Highlighter


About

Formatting Syntax Highlighter is an HTML format for displaying code in a more attractive way based on PrismJS. This formatting will perform a series of processes on the code text, adding copy functionality, highlighting certain parts such as tags, attributes, variables, and more - (Demo).



Specification




Configuration



Description

box
Value Preview
none View
border View
shadow View

line-number
Activate line numbers - (View).
break
When the value is yes, long lines of code will be forced to break onto new lines.

Value Preview
yes View
no View

When this configuration is set to yes, the line-number configuration is not available.
formatting
By default, the system will process all PRE and CODE elements that placed in supported spesification (see data Spesification). By setting this configuration to no, the element will not be processed with formatting (it will use the browser's default style).



Usage

This formatting is an extension, make sure you have installed the formatting as detailed on Extension: Syntax Highlighter.


  1. HTML FORMAT 
          	
          
        <code class='language-***'>Parsed Code...</code>
          
        
          	
          
        <pre>
          <code class='language-***'>Parsed Code...</code>
        </pre>

    Explanation
    language-***
    This class defines the language of the code to be highlighted. Replace *** with one of the supported languages: html, css, javascript, xml, clike, markup, svg, mathml, ssml, atom, rss, plain.

    Example: 
    
  <code class='language-html'>Parsed Code...</code>

    Parsed Code
    Place the parsed code here. For complete information about parsing, Google: How to parse HTML.

    Example: 
                  
    <pre>
      <code class='language-html'>
        &lt;div&gt;lorem ipsum&lt;/div&gt;
      </code>
    </pre>
              
            
                  
              <div>lorem ipsum</div>

    Inline and Block
    The Inline format is used to highlight code without creating a new line. Use this format for highlighting short code snippets within a paragraph.

    The Block format is used to highlight code by displaying it in a special box. Use this format for highlighting longer code snippets.

    Compare the results for the two examples below:

    Inline Example: 
                
            Lorem ipsum dolor sit amet. 
            <code class='language-html'>
              &lt;div&gt;lorem ipsum&lt;/div&gt;
            </code> 
            Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. <div>lorem ipsum</div> Lorem ipsum dolor sit amet.

    Block Example: 
                
            Lorem ipsum dolor sit amet. 
            <pre>
              <code class='language-html'>
                &lt;div&gt;lorem ipsum&lt;/div&gt; 
                &lt;div&gt;lorem ipsum&lt;/div&gt;
              </code> 
            </pre>
            Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. 
    
            <div>lorem ipsum</div>
            <div>lorem ipsum</div>
    Lorem ipsum dolor sit amet.


  2. Adding Configuration Add the desired configuration by adding the attribute
    data-configuration-name='Value' to the PRE element.

    Example: 
              
    <pre data-box='shadow'>
      <code class='language-html'>
        &lt;div&gt;lorem ipsum&lt;/div&gt;
      </code>
    </pre>
          
        
              
          <div>lorem ipsum</div>

    Adding configurations only supports the block format.
Have Question?