czwartek, 27 marca 2014

Wpięcie SyntaxHighlighter w Bloggera

Wygląda to na nietrudne. Robimy tak:
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'/> 

oraz zmniejszyć listę Brushes. Ja pozostawiłem sobie tylko: CSS, JScript, PHP, SQL, XML.

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>

Lista szablonów kolorystycznych jest tutaj:
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:

Prześlij komentarz