Цвет (подсветка синтаксиса) в теге HTML <code>
Во фрагменте кода вроде следующего...
class Foo
{
internal Foo()
{
for (int i = 0; i < 42; ++i);
}
}
... его различные ключевые слова и т. д. имеют цветовую кодировку, когда они отображаются в моих браузерах.
Когда я делаю "Просмотр исходного кода", я не вижу ничего особенного в HTML, который бы реализовывал эту цветовую кодировку.
Как и / или где реализована эта специфичная для синтаксиса цветовая подсветка? Например, встроен ли он в браузеры или он реализован с помощью специфичного для сайта JavaScript, редактирующего DOM в браузерах?
Я считаю, что это сложный вопрос для Google.
3 ответа
Stackru использует библиотеку Google prettify JS для подсветки синтаксиса. Он выполняется на стороне клиента после доставки сервером HTML-кода. Вот почему вы не видите его в исходном HTML-коде. Если у вас есть плагин для браузера, такой как FireBug, вы сможете проверить DOM после того, как prettify сделает свое дело.
Есть отличный FAQ Что такое подсветка синтаксиса и как она работает? закончился на meta.SE.
Я полностью цитирую это для вашего удобства, но вы можете проверить оригинальную публикацию на предмет обновлений в списке поддерживаемых языков.
Что такое подсветка синтаксиса?
Подсветка синтаксиса позволяет выделять код в сообщениях на основе языка, на котором он написан, чтобы его было легче читать.
Как это работает?
В стеке Exchange нет собственного механизма подсветки синтаксиса. Он использует Google Code Prettify. Поэтому любые ошибки и запросы функций, касающиеся подсветки синтаксиса, не могут обрабатываться Stack Exchange и должны быть направлены в команду Google Code Prettify.
Подсветка синтаксиса назначается предварительному просмотру при создании или редактировании сообщений, как только вы перестанете набирать текст в течение 5 секунд.
Prettify поддерживает список основных языков, которые он может выделить (включая C/C++, C#, Java, JavaScript/CoffeScript, Perl, Python, Ruby, Regex, Bash, HTML, XML), а также стандартную подсветку по умолчанию, которая работает сносно на большинство C-подобных языков и HTML-подобные языки разметки. Дополнительные языки реализованы как расширения (каждый lang-*.js файл).
Почему мой код не подсвечивается правильно?
Если ваше сообщение не имеет правильной подсветки, возможно, оно не поддерживается. Пожалуйста, посмотрите список поддерживаемых языков Prettify. Если вашего языка нет в списке, его необходимо создать в проекте Prettify, прежде чем его можно будет развернуть в Stack Exchange.
Если язык, который может быть применен к тегу, уже есть в списке, но не используется в Stack Exchange, пожалуйста, подайте запрос функции здесь, в Meta, чтобы он был развернут в сети.
Как мне сообщить об ошибке или запросить новый язык?
Если это действительно ошибка в самой подсветке синтаксиса, проверьте список проблем, чтобы убедиться, что об этом уже сообщалось. Если это не так, не стесняйтесь сообщить об этом или присоединиться к проекту и представить исправление самостоятельно. Если вы хотите, чтобы поднятая проблема была исправлена быстро, лучше всего включить исправление в отчет. Если это исправление уже было реализовано в Prettify, но все еще не работает здесь, пожалуйста, отправьте запрос функции в Meta, чтобы запросить развертывание новой версии Prettify.
Вы также можете отправить запрос на добавление нового языка в этот же список проблем. Имейте в виду, что Stack Exchange не поддерживает эту подсветку синтаксиса, и публикация отчетов об ошибках или запросов функций, касающихся этого, здесь, в Meta, не приведет к их исправлению или реализации.
Прежде чем что-то делать, убедитесь, что у вас включена правильная подсветка.
Как это определяет язык для подсветки синтаксиса?
За кулисами Stack Exchanges использует теги вопроса, чтобы вывести язык, который вы используете. Если есть несколько тегов с подсветкой синтаксиса, он использует значение по умолчанию и позволяет Prettify определять, какой язык лучше использовать.
Если вам интересно, есть ли у тега языковая подсказка, любой пользователь может проверить, посетив вики-страницу этого тега. Подсказка о языке (если есть), которая в данный момент используется для этого тега, будет отображаться в самом низу, под кнопками вики:
Можно явно переопределить используемую подсветку на выбранный вами язык, указав подсказку языка над блоком кода:
<!-- language: lang-or-tag-here -->
code goes here
Вы можете использовать код языка или имя тега в подсказке языка, чтобы активировать подсветку синтаксиса. Ниже приведен полный список кодов поддерживаемых языков для prettify.
Например:
Here is a code block with language code as hint:
<!-- language: lang-js -->
function greet(person) {
return "Hello " + person;
}
var user = "John Doe";
alert(greet(user));
Here is a code block with tag name as hint:
<!-- language: typescript -->
var arr = [0, 1, 2];
Если вы не хотите выделять синтаксис, вы можете использовать lang-none язык:
<!-- language: lang-none -->
Вы также можете применить языковую подсказку ко всем кодовым блокам в своем сообщении (так что вам не нужно добавлять подсказку перед каждым):
<!-- language-all: lang-or-tag-here -->
Подсказка: языковые коды
Это полный список каждого идентификатора, который вы можете использовать в подсказке языка для подсветки синтаксиса.
Core:
- По умолчанию: пусть Prettify интерпретирует код и угадывает
default - Нет: явно не использовать подсветку синтаксиса
lang-none - Bash и другие сценарии оболочки
lang-bash,lang-bsh,lang-csh,lang-sh - C, C++, Objective-C и др.
lang-c,lang-cc,lang-cpp,lang-cxx,lang-cyc,lang-m - C#
lang-cs - CoffeeScript
lang-coffee - HTML, XML, XSL и др.
lang-html,lang-xml,lang-xsl - Джава
lang-java - JavaScript
lang-js,lang-javascript - JSON
lang-json - Perl
lang-pl,lang-perl - питон
lang-py,lang-python,lang-cv - Regex
lang-regex - Рубин
lang-rb,lang-ruby - Ржавчина
lang-rc,lang-rs,lang-rust
Расширения:
- Clojure
lang-clj - CSS
lang-css - дротик
lang-dart - Erlang
lang-erl,lang-erlang - Идти
lang-go - Haskell
lang-hs - LaTeX, TeX
lang-latex,lang-tex - Лисп, Схема
lang-cl,lang-el,lang-lisp,lang-lsp,lang-scm,lang-ss,lang-rkt - Lua
lang-lua - MATLAB
lang-matlab - OCaml, SML, F# и др.
lang-fs,lang-ml - Паскаль, Дельфы
lang-pascal - Буферы протокола
lang-proto - R, S
lang-r,lang-s - Scala
lang-scala - SQL
lang-sql - VHDL
lang-vhdl,lang-vhd - Visual Basic, VBScript
lang-vb,lang-vbs
Подсказка: теги
Вы можете указать любой тег, который существует на сайте, и он будет использовать любой языковой код, связанный с этим тегом (который может быть либо нулевым (без подсказки), либо стандартным, либо определенным языковым кодом).
Имейте в виду, что по умолчанию все теги начинаются с none как их код языка. Теги с none указанный в качестве языкового кода будет игнорироваться и возвращаться к default,
Вы также можете использовать равнину none ключевое слово, чтобы вручную указать отсутствие подсветки синтаксиса, аналогично использованию lang-none код выше.
Примечание для редакторов:
Пожалуйста, не добавляйте в приведенный выше список, если вы не уверены на 100%, что он существует. То, что вы что-то вводите, и похоже, что оно выделено правильно , не означает, что идентификатор действительно существует в системе. Имейте в виду, что неверные идентификаторы возвращаются к значениям по умолчанию. При добавлении новой подсказки в список, пожалуйста, дайте ссылку на мета-вопрос, который подтверждает наличие подсказки в вашей сводке редактирования.
Примечание для комментаторов:
Комментарии в этом FAQ предназначены для запроса разъяснения того, что вы можете не понять в FAQ, чтобы это можно было исправить. Пожалуйста, НЕ спрашивайте, будут ли в будущем поддерживаться определенные языки. На этот вопрос мы не можем ответить, потому что Stack Exchange не поддерживает этот маркер. Посетите Google Code Prettify для языковой поддержки.
Это библиотека Javascript. Есть немало, самым популярным из которых является SyntaxHighlighter. Мой личный фаворит, хотя Чили.