HTML


Подсветка кода

Иногда в описании чего либо нужно вставить код, и для этого используется тег <pre> </pre>, но как известно многие редакторы имеют подсветку кода и выглядит лучше если эта подсветка будет в справке.

AkelPad

В AkelPad подсветка обеспечивается плагином Coder, а экспорт в HTML обеспечивается скриптом CodePoster.js. Подсветка зависит от выбранное темы, т.е. можно выбрать светлую или тёмную темы. Команда пунтка меню следующая:

"Экспорт в HTML" Call("Scripts::Main", 1, "CodePoster.js", `-Format="html" -BR="<br />" -Info=false -Enclose="<p class="codebox">${result}</p>"`) Icon("%a\AkelFiles\icons\ico\ExportHTML.ico")

Результат возвращается в буфер обмена. Цвета указаны явно, поэтому желательно делать скрипт для обработки данных, то есть создать классы, а явные цвета заменить классами, что позволит менять цвет в css-файле. Преимущество AkelPad в том, что плагин Coder позволяет создать подсветку с помощью регулярных выражений, а также подсветку одного кода внутри другого кода, например js в html. По умолчанию код возвращается в тегах <pre> </pre>, поэтому в параметрах командной строки указан параметр -Enclose с возвратом результата внутри класса codebox. В файл стиля styles.css нужно добавить класс codebox.

.codebox /* фрагменты кода */
{
  color: #72adc0;
  background-color: #222;
  border: #666 1px solid;
  padding: 6px;
  font-size: 1.0em;
  font-family: Arial, Consolas, 'Courier New';
  white-space: normal;
}

Также результат html-страницы нужно почистить от мусора и поправить отступы. Для тегов <pre> </pre> отступы работают, а при использовании тега <p> </p> с классом codebox надо заменить пробелы на неразрывный пробел &nbsp; и удалить подсвечивание пробелов. Ещё в <pre> </pre> длинные строки не переносятся и надо прокручивать текст горизонтальной прокруткой, а в тегах <p> </p> происходит автоперенос длинных строк и также здесь нужно использовать <br /> для переноса строк.

Notepad++

В Notepad++ подсветка обеспечивается плагином NppExport, пунктом меню "Плагины → NppExport → Export to HTML". В результирующем файле создаются классы стиля, а подсветка используется в виде указания классов.

CSS-файл

Для быстрого изучения стилей CSS можно взять готовые css-файлы из CHM-файлов, которые имеют подсветку кода.