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

StackOverflow https://stackoverflow.com/questions/1647724

Вопрос

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

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

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

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

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

Я нахожу этот вопрос трудным для поиска в Google.

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

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

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

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

Приукрасить поддерживает список основные языки которые он может выделить (включая 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 Exchange использует теги к вопросу чтобы определить язык, который вы используете.Если существует более одного тега с подсветкой синтаксиса, он использует значение по умолчанию и позволяет 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 -->

Намекающий:Языковые коды

Это полный список всех идентификаторов, которые вы можете использовать в языковой подсказке для подсветки синтаксиса.

Ядро:

  • По умолчанию:позвольте 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
  • Кофейный скрипт
    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
  • Питон
    lang-py, lang-python, lang-cv
  • Регулярное выражение
    lang-regex
  • Рубин
    lang-rb, lang-ruby
  • Ржавчина
    lang-rc, lang-rs, lang-rust

Расширения:

Намекающий:Теги

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

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

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

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

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

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

Комментарии к этому часто задаваемому вопросу предназначены для запроса разъяснений по поводу того, что вы, возможно, не поняли в часто задаваемом вопросе, чтобы это можно было исправить.Пожалуйста НЕ ДЕЛАЙТЕ ЭТОГО спросите, будут ли определенные языки поддерживаться в будущем.Это нет вопрос, на который мы можем ответить, потому что Stack Exchange не поддерживает этот маркер.Посетить Приукрашивание кода Google для языковой поддержки.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top