Автор

Подсветка синтаксиса в примерах кода

Подсветка синтаксиса в примерах кода


 

Все очень просто, т.к. для этого используются специальные программы-скрипты. И об одном из этих скриптов я и решил рассказать - Highlight.js, который кстати используется и на этом сайте.

 

Скачать Highlight.js версия 7.3

 

Highlight.js - на данный момент является одним из популярнейших скриптом этого типа. Пользоваться им очень просто, потому что работает он автоматически: сам находит блоки кода, сам определяет язык, сам подсвечивает.

Этот автоматизм не только удобен, но и делает возможным подсветку кода, даже если текст набирается каким-нибудь синтаксисом вроде Markdown, где нет возможности легко и просто проставить нужный class для HTML-элемента кода.

Программа знает такие языки:

1. 1C
2. AVR Assembler
3. Apache
4. Axapta
5. Bash
6. C#
7. C++
8. CSS
9. DOS .bat
10. Delphi
11. Django
12. HTML, XML
13. Ini
14. Java
15. Javascript
16. Lisp
17. MEL (Maya Embedded Language)
18. PHP
19. Perl
20. Python
21. Python profile
22. RenderMan (RIB, RSL)
23. Ruby
24. SQL
25. Smalltalk
26. VBScript
27. diff

Установка:

Для установки highlight.js на ваш сайт необходимо вставить следующий код, где-нибудь в районе закрывающего тега body (перед тегом).

 

<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
  hljs.initHighlightingOnLoad();
</script>

 

Для уменьшения времени загрузки можно ограничить автоопределение языков списком используемых языков:

 

<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
  hljs.initHighlightingOnLoad('html', 'css');
</script>

 

Полный список классов для разных языков приведен в readme.rus.txt.

Для определения цветов подсветки используйте следующий код:

 

.comment {
  color: gray;
}

.keyword {
  font-weight: bold;
}

.python .string {
  color: blue;
}

.html .atribute .value {
  color: green;
}

 

разместите его перед закрывающим тегом head.

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

В тексте статьи для подсветки синтаксиса исходного кода используйте следующую конструкцию:

 

<pre><code>...</code></pre>

 

для принудительного использования подсветки конкретного языка или для отказа от подсветки используйте параметр class тега code:

 

<pre><code class="html">...</code></pre>

 

<pre><code class="no-highlight">...</code></pre>

 

Лично я на данном сайте использую стиль sunburst.css из папки стилей /styles/ с небольшими изменениями (если вам нравится пользуйтесь).

МОЙ СТИЛЬ CSS:

В правом нижнем углу вы видите автоопределение документа: css, html, Javascript и т.д.:

pre code[class]:after {
  content: 'Документ:' attr(class);
  display: block; text-align: right;
  font: 1em / 1.3em 'Lucida Console', 'courier new', monospace;
  color: #646463;
  padding-top: 0.5em;
  text-shadow : 0px 1px 0px #000;
}

А ниже весь стиль целиком:

/*  Sunburst-like style (c) Sergey Tselovalnikov <info@s-sd.ru>  */

pre {
    background-image:url('/images/pre-bg.jpg');
    padding: 8px;
    box-shadow: 0px 1px 10px #000 inset;
}
pre code {
  display: block; padding: 0.5em;
  font: 1em / 1.3em 'Lucida Console', 'courier new', monospace;
  color: #f8f8f8;
  text-shadow : 0px 1px 0px #000;
}
pre code[class]:after {
  content: 'Документ:' attr(class);
  display: block; text-align: right;
  font: 1em / 1.3em 'Lucida Console', 'courier new', monospace;
  color: #646463;
  padding-top: 0.5em;
  text-shadow : 0px 1px 0px #000;
}
pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}
pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}
pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}
pre .subst {
  color: #DAEFA3;
}
pre .regexp {
  color: #E9C062;
}
pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}
pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}
pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}
pre .css .class {
  color: #9B703F;
}
pre .rules .keyword {
  color: #C5AF75;
}
pre .rules .value {
  color: #CF6A4C;
}
pre .css .id {
  color: #8B98AB;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}
pre .preprocessor {
  color: #8996A8;
}
pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}
pre .css .function {
  color: #DAD085;
}
pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}
pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}
pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}
pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

 

Все остальную интересующую информацию Вы можете получить на официальном сайте программы.

Пользуйтесь дорогие друзья!

Новая статья о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Подсветка синтаксиса в примерах кода

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


Подсветка синтаксиса в примерах кода

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


Подсветка синтаксиса в примерах кода

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


Подсветка синтаксиса в примерах кода

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close