Как подсветить код в статьях?
Понедельник, Август 29th, 2011В общем пока сегодня писал пост о том как добавить кнопку “поделиться статьёй” в Google+, не мог толком вставить этот код в статью. Много плагинов переустанавливал: codecolorer, wp-syntax, ProtoBox, CodeBox, CodeColorer, SyntaxHighlighter Evolved. Видите какая куча и среди этой кучи не нашлось ни одного толкового, ну не могу вставить подсветку и всё.
Но всё же способ найден был благодаря просторам интернета.
Получается не надо никакого плагина ставить, а всё просто ручками нужно прописать, и эта прописка действует для всех сайтов не зависимо от платформы на которой он сделан. Такой вот супер простой как всегда выход.
Ну что, читаем мануал.
Для этого всё равно нужен скрипт и называется он – SyntaxHighlighter. С помощью его мы организуем посветку синтаксиса. Он поддерживает множество языков: PHP, C++, JavaScript, C# и другие. Пробовать его будем всё таки в WordPress, так как у меня же получилось.
Всё занимает максимум два хода, ну пусть три.
Первое – Ставим скрипт на хостинг
Второе – Подключаем файлы SyntaxHighlighter
Скачиваем SyntaxHighlighter на свой комп, лучше вот эту версию – syntaxhighlighter_2.1.382.zip, а затем делаем папку на хосте в корне и обзываем её “syntaxhighlighter”. В неё распаковываем архив скрипта.
Первый пункт установки закончен и переходим ко второму.
Подключаем к блогу все необходимые файлы SyntaxHighlighter. Для этого в header.php до тега добавляем код:
<link href="/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script><script type="text/javascript">// < ![CDATA[ SyntaxHighlighter.all(); // ]]></script> |
Теперь нам нужно подключить подсветку синтаксиса нескольких языков программирования, таких как: php, c++ и javascript, самые известные то есть, что тоже делаем вставкой кода в header.php до тега
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script><script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCpp.js"></script><script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script> |
Далее оформляем код в статье вот так:
Если язык PHP то прописываем – brush: php
Если язык C++ то – то вместо brush: php нужно brush: cpp
Они у нас прописаны в head страницы, так что подсвечиваться будут.
Как вы наверное приметили что при наведении на код в верхнем углу появляются кнопочки, что же сделаем и их для вас. Поместите в свой класс CSS на блоге вот это
.code_sample { border: 1px solid #DADADA; font-size: 12px; margin-bottom: 10px; margin-top: 10px; } |
Но всё таки мне этот метод не понравился. Ну не идет он на моей теме нормально и всё, хотя сначала шёл. Потом с каким то плагином они не сошлись и всё исчезло.
Нашёл всё таки другой плагин нормальный для своей темы. Называется WP Syntax. Кому нужен качайте по ссылке. Старенький, но зато беспроблемный. Как видите весь код подсвечивается, ну и что ещё нужно…
На этом я успокоился и не стал больше искать плагины…