na zakładce "Szablon" w naszym Bloggerze wybieramy klawisz "Edytuj kod HTML",
i tam w kodzie całego Template'a wklejamy bezpośrednio przed zamknięciem </head> (pewnie około linii 1000) te znaczniki:
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>Ważna jest ta podświetlona linia.
Oczywiście teraz możemy sobie dokonfigurować całość.
Po pierwsze możemy zmienić kolorystykę całego szablonu:
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
Dodałem także spolszczenie, czyli przed ustawieniem ".all()" wpisałem:
SyntaxHighlighter.config.strings.viewSource = "podgląd źródła"; SyntaxHighlighter.config.strings.copyToClipboard = "kopiuj kod do schowka"; SyntaxHighlighter.config.strings.copyToClipboardConfirmation = "Cały kod skopiowałeś do schowka!"; SyntaxHighlighter.config.strings.print = "drukuj ten tekst";
Jakby ktoś potrzebował to można domyślnie wyłączyć np. numerowanie wierszy:
SyntaxHighlighter.defaults['gutter'] = false;
Teraz użycie tego w Bloggerze powinno być w kodzie HTML. Piszemy:
<pre class="brush: html; gutter: false"> <!-- dowolny kod - z kolorystyką zdefiniowaną w brush: --> </pre>
Blogger jest na tyle dobry że wklejanie w jego edytorze różnych kodów (np. Przez Ctrl+Shift+V) od razu dobrze ESCAPE'uje znaczniki typu '<' '>' albo cudzysłowia.
Jeszcze pare opcji (podanych in-line) które mogą okazać się przydatne:
<pre class="brush: html; auto-links: false; toolbar: false"> <!-- dowolny kod - z kolorystyką zdefiniowaną w brush: --> </pre>
albo:
<pre class="brush: html; first-line: 12; highlight: [19, 20, 21]"> <!-- dowolny kod - z kolorystyką zdefiniowaną w brush: --> </pre>
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
Cała lista obsługiwanych języków jest tutaj:
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
Korzystałem trochę z opisu tutaj:
http://geektalkin.blogspot.com/2009/11/embed-code-syntax-highlighting-in-blog.html
Brak komentarzy:
Publikowanie komentarza