Прочие

Прочие WEB-сервисы

В этом разделе размещены материалы о том, какие есть полезные сторонние сервисы и как ими можно воспользоваться во благо, внедряя их в свои собственные проекты или проекты заказчиков. Конечно имеется гораздо больше готовых решений, которые предлагают различные сервисы для решения различных задач. Но в данном разделе я рассматриваю только те, которые мне понравились и которые я так или иначе использовал. В большинстве случаев, это бесплатные приложения или условно бесплатные (которые имеют бесплатную версию с урезанным функционалом), но которые позволяют быстро внедрить их на сайт, и из внедрение улучшает качество конечного продукта. Рекомендую не увлекаться готовыми решениями: лучше разобраться то, как они сделаны и работают, взять идею и сделать нечто подобное у себя на сайте. Это позволит не только улучшить собственный сайт, но и послужит хорошим ученым материалом для прокачивания собственных профессиональных навыков. Тем более, что развитие интернета на столько стремительно, что постоянно что-то меняется: появляются новые протоколы, новые версии не только программ, но и языков программирования. Поэтому для того, чтобы быть на волне современности, следует не просто брать и использовать чужие разработки, но хотя бы понимать, как они устроены и на каких принципах работают. И это касается не только программ и программирования, но и дизайна. Конечные пользователи научаются новым фишкам, которые им предлагают, появляются новые, более удобные (и/или привлекательные). И за этим тоже нужно поспевать для того, чтобы не отстать от привычной среды, в которую погружены конечные пользователи, так как от этого зависит то, на сколько привлекательным, а значит успешным, в глазах пользователей будет проект и сколько пользователей из тех, кто попал к вам на сайт, захочет на нём остаться и приходить снова и снова.


Разделы на Лунной Базе, посвящённые внешним сервисам:


Материалы на Лунной Базе, посвящённые внешним сервисам:

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Нумерация строк highlight.js

Всё хорошо в том, как работает библиотека подсветки кода языков программирования highlight.js на страницах сайта, но... Но автор решил не включать в неё нумерацию строк обосновывая это решение тем, что без неё всё будет работать быстрее. Как же быть, если нужно включить нумерацию строк на страницах сайта там, где есть подсветка кода? Решение есть! Оно простое и о том, как в highlight.js сделать так, чтобы и код посветить и номера строк показать, будет рассказано ниже.

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Как включить подсветку кода highlight.js на сайте

Есть масса расширений (плагинов и модулей), которые включают подсветку кода на разных языках программирования на сайтах. Код подсветки, который можно просто внедрить с помощью highlight.js практически на любую страницу, будь то одностраничный лендинг написанный на HTML или навороченная CMS-ка, буквально за 10 минут, и он будет работать по всех современных браузерах и на всех устройствах (при условии, что у пользователя не отключена работа скриптов на JavaScript, но таких параноиков всё меньше и меньше). В этой статье рассмотрим пошаговую инструкцию того, как включить подсветку кода highlight.js на сайте.

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Установка на сайт подсветки кода с помощью подключения библиотеки highlight.js

В предыдущих статьях было рассмотрено то, как установить подсветку кода с помощью подключения библиотеки highlight.js со стороннего сайта и то, как собрать и скачать файлы для установки highlight.js на сайт. Но так как нет ничего вечного, плюс никто не знает, сколько будет поддерживаться проект highlight.js его разработчиком и сколько времени ещё будут доступны файлы этой библиотеки на стороннем сервере, то в этой статье разберём, как установить (железобетонно) это полезное расширение к себе на сервер и подключить подсветку кода к себе на сайт, используя локальные файлы, которые никто не утащит и не потрёт.

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Изменение шаблона подсветки кода на другой стандартный шаблон highlight.js

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Выбор шаблона highlight.js на сайте highlightjs.org на демо-странице

Подсветка кода с помощью кода highlight.js поддерживает не только 185 языков программирования, но и имеет 89 шаблонов цветовых схем. Это позволяет подобрать подсветку кода на сайте с любым дизайном. Однако всё это разнообразие усложняет выбор того, какую же цветовую схему выбрать. Для упрощения выбора шаблона подсветки кода разработчик highlight.js предлагает воспользоваться визуальным представлением того, как будет выглядеть готовое решение подсветки кода на сайте, куда он будет установлен.

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Быстрая установка подсветки кода с помощью подключения библиотеки highlight.js

Для того, чтобы сайт, на котором размещены листинги программ на различных языках программирования не только выглядел красиво, но и им было удобно пользоваться, часто прибегают к подсветке синтаксиса приводимого кода программ. Для этих целей очень подходит библиотека написанная на JavaScript и имеющая большой набор стилей css для создания удобного с точки зрения владельца сайта дизайна. Эта библиотека — highlight.js.

Подкатегории