×

Внимание

Ваш браузер . Для корректного серфинга сети рекомендуем установить один из современных браузеров Chrome или Firefox.
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Каждому из нас рано или поздно приходится использовать элементы исходного кода. Для того, чтобы их выделить в тексте, компания Google представила скрипт под названием google code prettify. И сегодня я хочу рассказать вам, как же пользоваться этим полезным скриптом.  Полная документация доступна на официальном сайте

Установка

Для подключения скрипта на сайт нужно добавить в тег <head> секцию

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Использование

Для использования данного скрипта достаточно обернуть фрагмент кода тегами <pre> или <code>, указав класс prettyprint. Например: 

 

<pre class="prettyprint">...</pre> or <code class="prettyprint">...</code>

Пишите ваш код вместо многоточия, и он будет автоматически подсвечен на веб-странице. Пример:

До 

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

После

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

 Вы можете указать специфический язык: 

<pre class="prettyprint lang-html">
The lang-* class specifies the language file extensions.
File extensions supported by default include
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
"java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
"xhtml", "xml", "xsl".
</pre>

 Вот и все, надеюсь, эта статья окажется вам полезной :)

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

У вас недостаточно прав для того чтобы тут гадить.