Использование prettyprint для демонстрации кода

22 Февраля 2015

На сайтах, так или иначе связанных с программированием, в статьях можно встретить блоки кода, которые выводятся в крайне удобном формате, визуально похожим на то, что Вы видите в своих редакторах. Лично я для данных нужд использую замечательную библиотеку под названием prettyprint. Конечно, если Ваш блог сделан, к примеру, на wordpress, то, наверное, ни к чему тратить время на создание собственных решений ( можно скачать плагин crayon и спокойно публиковать свой код). В противном же случае приходится перед тем, как вставить свой код в статью, немного подготовить его для этого.

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



  function prepareCode()
  { 
   var code = document.getElementsByClassName("unpreparedCode")[0].value;// получаем код, который нужно отформатировать

   var tab = " ";

   // заменяем табуляцию на неразрывный пробел
   code = code.replace(/\t/gi, tab);

   // если символы табуляции отсутствуют, то ищем пробелы
   if (code.search('/\t/g') == -1) {
    code = code.replace(/[ ]{2}/gi, tab);
   }

   // убираем теги( если они, конечно, имеются)
   code = code.replace(/</g, "<").replace(/>/g, ">");

   // меняем символ конца строки на тег <br>
   code = code.replace(/\n/g, "<br>");

   // добавляем теги для использования библиотеки prettyprint
   code = '<code class="prettyprint">' + code + '</code>';

   document.getElementsByClassName("getCode")[0].value = code;// вставка отформатированного кода в нужный контейнер
  }

Ну и, разумеется html-код для удобства:

<textarea class="unpreparedCode"></textarea>
 <br>
 <br>
 <button class="add" onclick="prepareCode();">Добавить</button> 
 <br>
 <br>
 <textarea class="getCode"></textarea>

Подключаем библиотеку prettyprint на Вашу страницу. (Скачать можно Здесь).

<script src="/js/prettify.js"></script>
<link rel="stylesheet" href="/css/prettify.css" type="text/css"/>

Чтобы библиотека заработала нужно запустить функцию prettyPrint();

window.onload = function(){
 prettyPrint();
}

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

0
Комментарии

комментариев еще нету

Для того, чтобы выразить экспертное мнение, нужно авторизироваться