Fast Faq

Fast Faq

HighLight.js

€0.00
highlight
Use syntax highlighter HighLight.js on your magento frontend store.

  • Free extension.
  • 30 seconds install.
  • 166 available languages (HTML, PHP, XML, CSS, LESS, Javascript, JSON etc... ).
  • 77 css styles to format code the way you like.

html sample

<!DOCTYPE html>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>

JavaScript sample

require([ 'jquery'], function($){ $(document).ready(function($) {
    $(window).load(function() {
        {
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }
    });
}); });
Where can I see available styles ?
You wil lfind all styles and supported languages on HighLight.js demo page
HIGHLIGHT.JS DEMO STYLES
How do I change style ?
Just change style in the following file :
/app/code/Netgasoline/Highlightjs/view/frontend/layout/default.xml
Replace monokai-sublime.css with the style that you want to use.

<!-- /app/code/Netgasoline/Highlightjs/view/frontend/layout/default.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Netgasoline_Highlightjs::js/highlight.js"/>
        <script src="Netgasoline_Highlightjs::js/highlight.pack.js"/>
        <css src="Netgasoline_Highlightjs::css/styles/monokai-sublime.css"/>
    </head>
</page>
How to place code ?
You have to place your code inside those tags in order to highlight your code:
<pre><code class="Language"></code></pre>
SAMPLE :
<pre><code class="xml">
<!-- Your code here -->
</code></pre>

Install with Composer

  • Open your command line interface
  • Use "cd" to navigate to the root of your shop installation
  • Run this command:
    composer require GeromeF/Highlightjs
    

Install with archive file

  • Download from GitHub
  • Unzip the archive
  • Create directory app/code/Netgasoline/Highlightjs
  • Copy files into this new directory

Enable the extension

  • Open your command line interface
  • Use "cd" to navigate to the root of your magento store installation
  • Run the following commands
    php bin/magento module:enable Netgasoline_Highlightjs
    php bin/magento setup:upgrade
    
Write Your Own Review
You're reviewing:HighLight.js
Your Rating