Code Light - code highlighting in Joomla

Faced with the need to display the highlighted code on the pages. Unfortunately, I could not find a good plugin for this purpose. Everything that is on JED does not hold water. An online search did not give acceptable results.

The essence of the problem. The fact that almost all plug-ins, including the system plugin for highlighting code, add it during the creation of the material. That is, create a lot of junk tags that are stored in a database and inflate it. In addition, all this garbage is sent to server together with the text material, slowing down your website. To know these plug-ins are easy – they require a visual editor for your work, usually, JCE or TinyMCE.

An alternative would be a plugin that works exclusively on the user's browser side. Searching, I found such, but there was nothing to rejoice. Solving one problem, they created another: heavy javascript negated all the advantages. It is worth saying that in all cases the javascript library weighed more than 300 KB ... There is a need to create your own plugin.

To develop the plugin, I used the modular javascript library. Its weight is fully loaded 370.15KB, but thanks to its modularity, it can be significantly reduced. I left such languages: HTML, XML, SVG, MathML, CSS, JavaScript, C, C++, Java, PHP, Python, SQL. In addition, the library itself is corrected and optimized. As a result, the javascript weight decreased only to 28.6 KB. The loading of the script made asynchronous, that is, the plugin turned out to be SEO-optimized, and does not cause a page display delay.

To display the code in the material you need to use the instruction:
<pre class="line-numbers" data-start="1"><code class="language-css">your code here...</code></pre>. Instead of 'css' you need to substitute the desired language from the set above.
Type of plugin: content plugin. You can download it below.

Download plugin Code Light (20,1 кБ).

After installation, publish Code Light in the plugin manager. The plugin includes dark and light themes. On this site is light.

protected function populateState()
	{
		$app = JFactory::getApplication('site');

		// Load state from the request.
		$pk = $app->input->getInt('id');
		$this->setState('article.id', $pk);

		$offset = $app->input->getUInt('limitstart');
		$this->setState('list.offset', $offset);

		// Load the parameters.
		$params = $app->getParams();
		$this->setState('params', $params);

		$user = JFactory::getUser();

		// If $pk is set then authorise on complete asset, else on component only
		$asset = empty($pk) ? 'com_content' : 'com_content.article.' . $pk;

		if ((!$user->authorise('core.edit.state', $asset)) && (!$user->authorise('core.edit', $asset)))
		{
			$this->setState('filter.published', 1);
			$this->setState('filter.archived', 2);
		}

		$this->setState('filter.language', JLanguageMultilang::isEnabled());
	}

#breadcrumbs {
    background-color: #f0e5e5;
    padding: 10px 10% 10px;
    font-size: 0.8em;
}
#breadcrumbs li {
    list-style-type: none;
    display: inline-block;
}
#breadcrumbs a {
    text-decoration: none;
    color: #fc0303;
}
.wr_page {
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 20px 80px 10px #000000;
    padding: 40px;
}

function saveIt(name) {
	var x = document.getElementById(name).style.display;

	if (!x) {
		alert('No cookie available');
	} else if (localStorage) {
		localStorage[name] = x;
	}
}

function readIt(name) {
	if (localStorage) {
		return localStorage[name];
	}
}

Add comment