регистрациявход
☰
✕
регистрациявход

Code Light – подсветка кода в Джумла

Code LightВозникла необходимость выводить подсвеченный код на страницах. К несчастью, не удалось найти нормального плагина для этой цели. Просмотрел всё, что есть на JED, но ни один плагин не выдержал критики. Поиск в сети тоже не дал приемлемых результатов. В итоге был написан простой, но симпатичный плагин подсветки.

Суть проблемы. Дело в том, что практически все плагины, включая системный плагин подсветки в самой Джумла, добавляют подсветку на этапе создания материала. То есть, создают большое количество мусорных тегов, которые хранятся в базе данных и раздувают её. Кроме того, весь этот мусор отправляется сервером вместе с текстом материала, замедляя работу сайта. Вычислить такие плагины легко – они требуют визуального редактора для своей работы, обычно, JCE или TinyMCE.

Альтернативным вариантом был бы плагин, работающий исключительно на стороне браузера пользователя. Поискав, я такие обнаружил, но радоваться было нечему. Решая одну проблему, они создавали другую: тяжёлый javascript сводил на нет все преимущества. Стоит сказать, что во всех случаях javascript библиотека весила больше 300 KB... Назрела необходимость создания собственного плагина.

Для разработки плагина я использовал модульную javascript библиотеку Prism. Её вес в полной комплектации 370.15KB, но благодаря модульности, его можно значительно уменьшить. Я оставил такие языки: HTML, XML, SVG, MathML, CSS, JavaScript, C, C++, Java, PHP, Python, SQL. Кроме того, саму библиотеку подправил и оптимизировал. В результате вес javascript файла плагина уменьшился всего до 28,6 KB. Загрузку скрипта сделал асинхронной, то есть, плагин получился СЕО-оптимизированный, и не вызывает задержки отображения страницы.

Для вывода кода в материал нужно использовать инструкцию:
<pre class="line-numbers" data-start="1"><code class="language-css">your code here...</code></pre>. Вместо css подставляется нужный язык из набора выше.
Тип плагина: контент плагин. Скачать можно ниже.

Скачать плагин Code Light (20,1 кБ).

Совместимость Joomla! 3+, Joomla! 4+
plg_code_light.zip(19 KB)

После установки опубликуйте Code Light в менеджере плагинов. Плагин включает тёмную и светлую темы. На этом сайте светлая.


PHP: 
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());
	}


CSS: 
#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;
}


JavaScript: 
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];
	}
}


Добавить комментарий