подсветка кода | Wiki | PWODEV https://wiki.pwodev.com/tag/подсветка-кода/ Help for developers Fri, 09 Aug 2019 13:31:00 +0000 ru-RU hourly 1 https://wordpress.org/?v=6.9.1 highlight.js — лучшая подсветка синтаксиса кода https://wiki.pwodev.com/highlight-js-%d0%bb%d1%83%d1%87%d1%88%d0%b0%d1%8f-%d0%bf%d0%be%d0%b4%d1%81%d0%b2%d0%b5%d1%82%d0%ba%d0%b0-%d0%ba%d0%be%d0%b4%d0%b0/ https://wiki.pwodev.com/highlight-js-%d0%bb%d1%83%d1%87%d1%88%d0%b0%d1%8f-%d0%bf%d0%be%d0%b4%d1%81%d0%b2%d0%b5%d1%82%d0%ba%d0%b0-%d0%ba%d0%be%d0%b4%d0%b0/#respond Fri, 09 Aug 2019 13:25:44 +0000 https://wiki.pwodev.com/?p=678 Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса: Хотя…. Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в […]

Сообщение highlight.js — лучшая подсветка синтаксиса кода появились сначала на Wiki | PWODEV.

]]> Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:

Хотя….

Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Подсветка кода с помошью скрипта highlight.js
Зацени как клево смотрится официальный сайт

Итак краткая инструкция по установке:

Добавляем в <head> это:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

<pre><code class="html">...</code></pre>

class=»html» — это не обязательно, но если хочется, можно написать язык кода, чтобы упростить распознавание скриптом, типа кода.

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

Более подробная документация по скрипту и дополнительные опции можно найти в официальной документации highlight.js. Там же можно найти много различных тем и стилей подсветки кода.

Всем удачи в вашем не простом, но очень интересном деле. Не забывайте регистрироваться и писать комментарии.

Сообщение highlight.js — лучшая подсветка синтаксиса кода появились сначала на Wiki | PWODEV.

]]> https://wiki.pwodev.com/highlight-js-%d0%bb%d1%83%d1%87%d1%88%d0%b0%d1%8f-%d0%bf%d0%be%d0%b4%d1%81%d0%b2%d0%b5%d1%82%d0%ba%d0%b0-%d0%ba%d0%be%d0%b4%d0%b0/feed/ 0