Включение исходного кода языков программирования в записи не простая задача. У меня была возможность выяснить для себя, когда я переносил контент с форума MyBB в блог. После того, как вы скопировали некоторые фрагменты / скрипты кода PHP, вместо того, чтобы отобразить, код просто выполнялся напрямую! И это не помогло окружить код тегами code или blockquote. Кроме того, форматирование (пробелы, табуляции) удаляется из кода, размещенного таким образом, и удобочитаемость тоже не самая лучшая.
Я нашел решение, как всегда, у дяди Google. Чтобы иметь возможность размещать исходный код в сообщениях, вам необходимо установить дополнительный плагин, который поддерживает форматирование языков программирования. Я проверял:
- (использует GeSHi, поддерживает более 200 языков)
SyntaxHighlighter Evolved – это плагин, который позволяет размещать исходный код одновременно с эффектом окраски синтаксиса. Использует пакет .
и псевдонимов для использования:
ActionScript3 (as3, actionscript3)
Баш / оболочка (bash, shell)
ColdFusion (ср., Coldfusion)
C # (c-sharp, csharp)
C ++ (cpp, c)
CSS (CSS)
Delphi (дельфи, па, паскаль)
Дифф (diff, patch)
Эрланг (erl, erlang)
Groovy (заводной)
JavaScript (js, jscript, javascript)
Ява (Java)
JavaFX (jfx, javafx)
Perl (перл, пл)
PHP (php)
Простой текст (обычный текст)
PowerShell (PS, PowerShell)
Питон (py, python)
Рубин (рельсы, рор, рубин)
Скала (скала)
SQL (sql)
Visual Basic (vb, vbnet)
XML (xml, xhtml, xslt, html, xhtml)
Преимущество SyntaxHighlighter Evolved заключается в возможности настраивать внешний вид одного кода для отображения путем выбора поддерживаемых атрибутов. Это позволяет, например, свернуть длинный код или отключить переходы по ссылкам, даже если эти параметры активны во всем мире.
Синтаксис (false – отключен, true – включен):
attribute = “false / 0 или true / 1”
– rodzaj języka (aliasy to wartości w nawiasach na liście wyżej) lang / language – тип языка (псевдонимы – это значения в скобках в списке выше)
– edycja automatycznej klikalności linków автолинки – редактирование автоматических кликов по ссылкам
– dodanie dodatkowej klasy do okna z kodem classname – добавить дополнительный класс в окно с кодом
– pozwala na zwijanie kodu, wymagane jest kliknięcie, aby rozwinąć kod. свернуть – позволяет свернуть код, щелчок необходим для раскрытия кода. Полезно для длинного кода.
– numer pierwszej linii kodu firstline – номер первой строки кода
— wyświetlanie numeracji wierszy z lewej strony желоб – отображать номера строк слева
— rozdzielone przecinkiem linie kodu, które mają być podświetlone. выделение – разделенные запятыми строки кода, которые будут выделены. Пример: 2.5-10.12
— umożliwia dodatkowe podświetlenie kodu HTML/XML zagnieżdżonego w innych językach, np. PHP htmlscript – позволяет дополнительное выделение кода HTML / XML, встроенного в другие языки, например PHP
— jednocześnie wyłącza pasek narzędzi i numerowania. свет – отключает панель инструментов и нумерацию одновременно.
— wartość padding dla numerowania. padlinenumbers – значение дополнения для нумерации. Вы можете установить false (нет), true (автоматически) и целое число (конкретное значение заполнения).
tytuł (tylko wersja 3) title title (только версия 3)
TabSize
— pozwala na wyłączenie paska narzędzi i przycisków. Панель инструментов – позволяет отключить панель инструментов и кнопки.
— zawijanie linii; wraplines – перенос строки; работает только в версии 2
После установки из кабины мы указываем глобальные настройки. Мы выбираем версию Highlighter, цвет скина, видимость номеров строк, меняя ссылки на кликабельные или переходя по коду.
При написании записей мы заключаем фрагменты исходного кода в теги в соответствии с шаблоном на изображении ниже, используя псевдонимы языка:
Кроме того, вы можете добавить кнопки в редактор установив . Чтобы все заработало, выберите в настройках опцию «Загрузить все кисти».
эффект
В качестве примера приведу один из кодов. Вот как это отображается после того, как он окружен тегом code:
this.createToolbar(‘mytoolbar’, {
container: ‘bottom’,
items: [
{type: ‘button’, name: ‘mycode’, sprite: ‘mycode’, insert: ‘mycode’, title: ‘nazwa MyCode’}
]
});
Тот же код в SyntaxHighlighter Evolved:
this.createToolbar('mytoolbar', {
container: 'bottom',
items: [
{type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: 'nazwa MyCode'}
]
});
