Skip to main content

How to Use

note

Samples in various frameworks are available at : https://github.com/PhioAutomation/phio-highlighter

Wordpress​

View the Wordpress plugin which includes Installation instructions : https://wordpress.org/plugins/iecst-highlighter/

React​

Because React uses Javascript to load the html dynamically, we need to invoke the highlightCodeBlocks function that is exposed by the highlighter.

View a sample here : https://github.com/PhioAutomation/phio-highlighter/tree/main/react

Html​

The following shows a most basic exmaple of an html document that uses the highlighter as well as an inline example. Three items are required :

  1. Add the script tag with a src as "https://highlighter.phioautomation.com/iecst.js"
  2. Add a stylesheet that supports Prism CSS classes
  3. Identify the pre and code elements that you would like highlighted by adding a class languague-phioiecst
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vsc-dark-plus.min.css" />
<head>
<body>
    <script src="https://highlighter.phioautomation.com/iecst.js"></script>
        <pre class="language-phioiecst"><code class="language-phioiecst">// Your code here!</code></pre>
        <p>
            This is an inline piece of code where I want to use a keyword like <code class="language-phioiecst">VAR</code> or <code class="language-phioiecst">END_VAR</code> to demonstrate syntax highlighting.
        </p>
</body>
</html>