Список маркеров для вставки / отображения исходного кода в WordPress

2018 年 11 月 24 日

При написании статьи по программированию и представлении исходного кода мне нужен Highlighter, функция, которая может отображать код в удобной для чтения форме.На самом деле его разработано так много, что сложно решить, какой из них использовать.В этой статье мы представим инструменты для выделения исходного кода в WordPress и их функции отдельно для типа библиотеки, типа плагина и веб-службы.

Тип библиотеки

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

Highlight.js

Библиотека JavaScript под названием Highlight.js. Он поддерживает 189 языков программирования и имеет 89 стилей отображения (по состоянию на ноябрь 2018 г.).Функция так же проста, как выделение кода.Очень легкий.Популярный.

https://highlightjs.org/

Prism.js

Это также легкая библиотека JavaScript.Он поддерживает 153 языка и 8 стилей отображения (по состоянию на ноябрь 2018 г.).В качестве расширения вы можете легко добавлять номера строк, выделять указанные строки, отображать язык, устанавливать кнопку копирования и т. Д.Это тоже популярно.

https://prismjs.com/

Код Google-prettify

Как следует из названия, библиотека JavaScript, разработанная Google. Он поддерживает основные языки программирования, такие как C, Python, HTML, CSS, JavaScript, Makefile, но дополнительные языки должны поддерживаться расширениями.Существует 5 стилей отображения (по состоянию на ноябрь 2018 г.).В дополнение к методу загрузки в папку WordPress, подобному двум вышеупомянутым типам, и ее использованию, существует способ простой ее установки с помощью автозагрузчика.Информации на японском немного, потому что мало пользователей.

https://github.com/google/code-prettify

Тип плагина

Тип распространяется как бесплатный плагин WordPress.Его очень легко развернуть и управлять, но он может сделать ваш сайт немного тяжелее, чем другие типы.В типе библиотеки вы можете выбрать поддержку только необходимого языка, но в версии плагина это изображение со всеми языками и всеми функциями.

WP Code 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 Syntax Highlighter

Создается впечатление, что пользователей много и много информации по открытию на японском языке.Даже новички могут легко изменить размер и дизайн шрифта, добавить номера строк, выделить и т. Д., И это очень легко настраивается.Есть много отзывов о том, что он тяжелый, и вызывает беспокойство то, что последнее обновление было остановлено с 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.Хорошо, что вы можете указать размер шрифта только для части кода, и вы можете управлять различными настройками кнопок на простом экране настроек.На мобильных он тормозит, но человек, который ссылается на код, вероятно, с ПК, и я думаю, что проблема.