Досить багато сайтів містять на своїх сторінках лістинг коду, який може відрізнятися залежно від синтаксису мови своєї підсвічуванням. Підсвічування коду дозволяє поліпшити візуальне сприйняття інформації на сайті. Якщо ви помітили, то на нашому сайті теж є код з підсвічуванням, і зараз ми поговоримо про те, як таке зробити на своїх проектах. Існує досить непогана реалізація плагіна підсвічування коду, написана на javascript, називається highlight. За даними сайту, на якому розміщений плагін, сьогодні він вміє підсвічувати близько 169 мов, і 77 стилів, а так само багато має багато інших плюшок.
Ось приклад, як може виглядати код з підсвічуванням:
Тег А
Подивіться на мою фотографію!
Як зробити таке фото?
Розглянемо базовий приклад, як можна прикрутити highlight плагін на свій сайт. Насамперед, вам необхідно завантажити плагін hightlight з офіційного сайту.
Додайте файли в директорію шаблону вашого сайту, потім у заголовку підключіть скрипт і файл стилів плагіна.
hljs.initHighlightingOnLoad();
Рядок hljs.initHighlightingOnLoad(); ініціалізує роботу плагіна.
Тепер про те, як розмічати код. Робиться це просто, є два способи. Перший спосіб: розмістіть код між тегами
…
плагін спробує автоматом визначити синтаксис коду, і підсвітити його.
Другий спосіб – більш вірний, необхідно вказати синтаксис мови:
…
Всі підтримувані коди синтаксису мови ви можете переглянути у цьому списку. Що робити, якщо ви підключили плагін до загального шаблону сайту, а є певний код, який ви не хочете, щоб для нього була підсвічування? Для цього теж є можливість відключення підсвічування для окремих блоків:
…
Це базові можливості використання плагіна, але це не все. Про інші способи використання ви можете наочно ознайомитися на сторінках документації щодо використання плагіна.
Додав: htmaker, 26.02.2017 р.
(1 голосів, середній: 1,00 із 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
