Список маркеров для вставки / отображения исходного кода в WordPress
При написании статьи по программированию и представлении исходного кода мне нужен Highlighter, функция, которая может отображать код в удобной для чтения форме.На самом деле его разработано так много, что сложно решить, какой из них использовать.В этой статье мы представим инструменты для выделения исходного кода в WordPress и их функции отдельно для типа библиотеки, типа плагина и веб-службы.
Тип библиотеки
Маркер типа для загрузки полученного файла библиотеки в папку дочерней темы и его использования.Он легче плагина, но его установка занимает немного времени.
Highlight.js
Библиотека JavaScript под названием Highlight.js. Он поддерживает 189 языков программирования и имеет 89 стилей отображения (по состоянию на ноябрь 2018 г.).Функция так же проста, как выделение кода.Очень легкий.Популярный.
Призма.js
Это также легкая библиотека JavaScript.Он поддерживает 153 языка и 8 стилей отображения (по состоянию на ноябрь 2018 г.).В качестве расширения вы можете легко добавлять номера строк, выделять указанные строки, отображать язык, устанавливать кнопку копирования и т. Д.Это тоже популярно.
Код Google-prettify
Как следует из названия, библиотека JavaScript, разработанная Google. Он поддерживает основные языки программирования, такие как C, Python, HTML, CSS, JavaScript, Makefile, но дополнительные языки должны поддерживаться расширениями.Существует 5 стилей отображения (по состоянию на ноябрь 2018 г.).В дополнение к методу загрузки в папку WordPress, подобному двум вышеупомянутым типам, и ее использованию, существует способ простой ее установки с помощью автозагрузчика.Информации на японском немного, потому что мало пользователей.
https://github.com/google/code-prettify
Тип плагина
Тип распространяется как бесплатный плагин WordPress.Его очень легко развернуть и управлять, но он может сделать ваш сайт немного тяжелее, чем другие типы.В типе библиотеки вы можете выбрать поддержку только необходимого языка, но в версии плагина это изображение со всеми языками и всеми функциями.
WP-код Highlight.js
Это версия плагина Highlight.js, представленная в типе библиотеки. Совместим с SyntaxHighlighter, Prettify и CrayonSyntaxHighlighter, поэтому вы также можете переходить с других маркеров.
https://ja.wordpress.org/plugins/wp-code-highlightjs/
Подсветка синтаксиса Prism
Версия плагина Prism.js.
https://ja.wordpress.org/plugins/ank-prism-for-wp/
Код Prettify
Одно и тоже.
https://ja.wordpress.org/plugins/code-prettify/
Подсветка синтаксиса Crayon
Создается впечатление, что пользователей много и много информации по открытию на японском языке.Даже новички могут легко изменить размер и дизайн шрифта, добавить номера строк, выделить и т. Д., И это очень легко настраивается.Есть много отзывов о том, что он тяжелый, и вызывает беспокойство то, что последнее обновление было остановлено с 2015 года.
https://ja.wordpress.org/plugins/crayon-syntax-highlighter/
Подсветка синтаксиса Mivhak
Он поддерживает более 130 языков программирования и имеет 36 тем.Кажется, что языковые скрипты и темы загружаются по запросу из облегченных CSS и JS, но они кажутся такими же тяжелыми, как Crayon Syntax Highlighter.Вы можете указать размер шрифта только для части кода.
https://ja.wordpress.org/plugins/mivhak/
Я сравнил влияние каждого плагина на скорость отображения сайта, поэтому, пожалуйста, также обратитесь к нему.
Сравнение скорости отображения сайта плагинов Syntax Highlighter
Тип веб-сервиса
Это тип Highlighter, который можно выделить, преобразовав исходный код в тег для встраивания в Интернет и вставив тег в текстовый редактор Wordpress.
Gist (сервис GitHub)
Gist - это сервис совместного использования кода на GitHub. Когда вы загружаете код в Gist, выводится тег для отображения. Необходимо зарегистрироваться на GitHub, но наоборот, преимущество в том, что вы можете редактировать и управлять кодом на стороне GitHub (редактирование с помощью текстового редактора,Или жеС такими тегами как) сложно повозиться.
https://gist.github.com/discover
srctohtml
Вы можете легко преобразовать код в HTML-теги для встраивания без регистрации.Поддерживаемые языки: JavaScript, C ++, PHP и немного меньше.
http://marginalsoft.com/tools/srctohtml/
Какой выбрать
Также говорят, что какой инструмент использовать, зависит от того, что вы хотите подчеркнуть.Я кратко изложил ориентацию каждого из них, поэтому, пожалуйста, обратитесь к ним.Также важно, заботитесь ли вы о дизайне во время мелирования.
Тип библиотеки | Упор сделан на легкость работы и скорость отображения. |
Тип плагина | Акцент на простоте введения (Некоторые плагины не такие тяжелые) |
Тип веб-сервиса | GitHub зарегистрирован (Gist), который увлечен функцией управления кодом Люди, у которых мало возможностей для встраивания (srctohtml) |
Кстати, я использую плагин Mivhak Syntax Highlighter.Хорошо, что вы можете указать размер шрифта только для части кода, и вы можете управлять различными настройками кнопок на простом экране настроек.На мобильных он тормозит, но человек, который ссылается на код, вероятно, с ПК, и я думаю, что проблема.
обсуждение
Список Pingback и Trackback
[…] Список выделения для вставки / отображения исходного кода в WordPress | NoteBook Highlighter… […]