Подтвердить что ты не робот

Цвет (подсветка синтаксиса) в HTML <code> tag

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

Ответ 3

Существует отличный FAQ Что такое подсветка синтаксиса и как она работает? на meta.SE.

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

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

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

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

У Stack Exchange нет собственного механизма подсветки синтаксиса. Он использует Google Prettify. Поэтому любые ошибки и запросы функций, связанные с подсветкой синтаксиса, не могут обрабатываться Stack Exchange и должны направляться в команду, находящуюся под Google Code Prettify.

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

Prettify поддерживает список основные языки, который он может выделить (включая 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

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

Например:

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, С++, Objective-C и др.
    lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
  • С#
    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
  • Ржавчина
    lang-rc, lang-rs, lang-rust

Расширение:

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

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

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

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

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

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

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

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