Начинающий программист, которому стукнуло в голову захотелось поделиться набросками кода или новыми идеями для чего либо захочет чтобы то подобие кода, которое он публикует имело хоть какую то структуру и было заметно!
Есть очень неплохая JavaScript библиотека для подсветки синтаксиса исходных кодов на веб-страницах.
На данный момент включена в дистрибутив поддержка следующих языков: Java, C++, XML, CSS, HTML, JavaScript, Bash, C#, Delphi, PHP, Python, Ruby, Scala, SQL, Visual Basic. Дальше мне откровенно лень писать у меня нет времени расписывать все плюшки. Детали смотреть тут.
Приступим к установке Syntaxhighlighter:
Устанавливать будем конкретно на наш блог (blogspot), как ставить на другие сайты будем думать потом.
1) Делаем бекап нашего блога.
2) Открываем наш шаблон в режиме HTML, ищем тег: </b:skin> и копируем перед ним все, что найдете вот тут. Это стили для отображения.
Примечание: ставить до ]]>
3) Ищем тег: </head> и вставляем перед ним вот это:
4) Ищем тег: </body> и вставляем перед ним вот это:
злосчастный наш супер шаблон и радуемся если все сохранилось без ошибок. (писаться от счастья пока не надо)
6) Для вставки кода пользуемся вот такой структурой(опять таки в режиме HTML):
Проще говоря - пользуем это:
Идем брать с полки пирожок.
Список всех языков и атрибутов для тега class="..." тут.
3) Ищем тег: </head> и вставляем перед ним вот это:
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
4) Ищем тег: </body> и вставляем перед ним вот это:
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5) Сохраняем 6) Для вставки кода пользуемся вот такой структурой(опять таки в режиме HTML):
<pre name="code">
...Наш супер-пупер код...
</pre>
Этот код будет высвечиваться и все будет ОК, однако давайте немножко подумаем над минусами: Библиотеке потребуется какое то время, чтобы распознать тип кода, а потом чтобы подсветить. Что врятли будет убыстрять полную прогрузку страницы.Проще говоря - пользуем это:
<pre name="code" class="php">
echo "I like PHP";
</pre>
Мы явно указали язык, поэтому скорость загрузки страницы выросла.Идем брать с полки пирожок.
Список всех языков и атрибутов для тега class="..." тут.
echo "I like PHP";