Как сделать подсветку синтаксиса кода без плагинов?

Всем привет smile Наверняка многие из вас используют какой-либо плагин для подсветки синтаксиса кода. Действительно, я тоже считаю, что это достаточно полезно делать, потому что так код получается читабельнее. Я вот до сих пор не разобрался, как же мне выводить на своем блоге код. Так, как сейчас или может тоже сделать с подсветкой? Может кто-нибудь из вас что-то посоветует?

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

В самом сервисе все очень просто — есть три поля. В первое вставляете код, вот такой вставил я:
код
Чуть выше этого поля нужно выбрать сам язык. В моем случае это html, но есть и десятки других. Можно включить дополнительный параметр — пронумеровать линии. Все, после этого нажимаем на кнопку Highlight!

Автоматически следующие 2 поля заполняться. В первом из них будет показан наглядный результат того, что получилось:
красивый код
Как видите, на выходе мой код гораздо красивее, с подсветкой тегов и атрибутов. А в последнем поле содержится исходный код, который вам нужно вставить, чтобы получить то, что изображено в поле 2. Вот такой код мне снегерил сервис:
генерированный код
Разбираться что тут к чему нет смысла, просто копируете и вставляете в нужном месте. Я вставлю прямо здесь (чтобы сразу выделить весь код, зажмите Ctrl + A):

<meta charset = "utf-8">
	<link rel = "stylesheet" href = "style.css">
</head>
<body>
	<div id = "wrap">
 
	</div>

Вот такая красота получается. А вот и ссылка на сервис.

Еще в качестве альтернативы можно использовать сервис tohtml.com.

Если же вы хотите более интересное решение — предлагаю воспользоваться скриптом prettify.js. Загуглите и найдете про него, подключение там очень простое.

Комментариев: 1
  1. Валерий

    Здравствуйте, Михаил! Очень интересная и полезная для меня статья. Спасибо! С уважением, Валерий Бородин!!!

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: