Цвет (подсветка синтаксиса) в теге HTML <code> - PullRequest
21 голосов
/ 30 октября 2009

В фрагменте кода, подобном следующему ...

class Foo
{
  internal Foo()
  {
    for (int i = 0; i < 42; ++i);
  }
}

... различные ключевые слова и т. Д. Имеют цветовую кодировку, когда отображаются в моих браузерах.

Когда я делаю «Просмотр источника», я не вижу ничего особенного в HTML, который бы реализовывал эту цветовую кодировку.

Как и / или где реализована эта специфичная для синтаксиса цветовая подсветка? Например, встроен ли он в браузеры или он реализован с помощью специфичного для сайта JavaScript, редактирующего DOM в браузерах?

Я считаю, что это сложный вопрос для Google.

Ответы [ 3 ]

20 голосов
/ 30 октября 2009

Stackoverflow использует библиотеку Google prettify JS для подсветки синтаксиса. Он выполняется на стороне клиента после доставки сервером HTML-кода. Вот почему вы не видите его в исходном HTML-коде. Если у вас есть плагин для браузера, такой как FireBug , вы сможете проверить DOM после того, как prettify сделает свое дело.

4 голосов
/ 30 октября 2009

Это библиотека Javascript. Есть немало, самым популярным из которых является SyntaxHighlighter . Мой личный фаворит - Чили , хотя.

0 голосов
/ 22 января 2017

Есть отличный FAQ Что такое подсветка синтаксиса и как она работает? over meta.SE.

Я полностью цитирую его здесь для вашего удобства, но вы можете проверить оригинальное сообщение на наличие обновлений в списке поддерживаемых языков.


Что такое подсветка синтаксиса?

Подсветка синтаксиса позволяет выделять код в сообщениях на основе языка, на котором он написан, чтобы его было легче читать.

Как это работает?

У Stack 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 определить, какой язык лучше использовать.

Если вам интересно, есть ли у тега языковая подсказка, любой пользователь может проверить, посетив вики-страницу этого тега. Подсказка о языке (если есть), которая в данный момент используется для этого тега, будет отображаться в самом низу, под кнопками вики:

Code language (used for syntax highlighting): lang-java

Можно явным образом переопределить выделение, используемое на выбранном вами языке, указав подсказку языка над блоком кода:

<!-- 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
  • Java
    lang-java
  • JavaScript
    lang-js, lang-javascript
  • JSON
    lang-json
  • Perl
    lang-pl, lang-perl
  • Python
    lang-py, lang-python, lang-cv
  • Regex
    lang-regex
  • рубин
    lang-rb, lang-ruby
  • Rust
    lang-rc, lang-rs, lang-rust

Расширения:

Подсказка: теги

Вы можете указать любой тег, который существует на сайте, и он будет использовать любой языковой код, связанный с этим тегом (может быть либо null (без подсказки), по умолчанию или специфический код языка).

Имейте в виду, что по умолчанию все теги начинаются с none в качестве кода языка. Теги с none, указанными в качестве их языкового кода, будут игнорироваться и возвращаться к default.

Вы также можете использовать ключевое слово plain none, чтобы вручную указывать отсутствие подсветки синтаксиса, аналогично приведенному выше коду lang-none.


Примечание для редакторов:

Пожалуйста, не добавляйте в вышеприведенный список, если вы не уверены на 100%, что оно существует. Просто потому, что вы что-то печатаете, и оно выглядит как будто оно выделено правильно не означает, что идентификатор фактически существует в системе. Имейте в виду, что недействительные идентификаторы возвращаются к по умолчанию . При добавлении новой подсказки в список укажите ссылку на мета-вопрос, который подтверждает существование подсказки .

Примечание для комментаторов:

Комментарии в этом FAQ предназначены для запроса разъяснения того, что вы можете не понять в FAQ, чтобы это можно было исправить. Пожалуйста, НЕ спрашивайте, будут ли поддерживаться определенные языки в будущем. Это не вопрос, на который мы можем ответить, потому что Stack Exchange не поддерживает этот маркер. Посетите Google Code Prettify для языковой поддержки.

...