czwartek, 12 kwietnia 2012

Syntax highlight na bloggerze

Skoro juz wszystko dziala jak nalezy - opisze po krotce co, jak, skad i po co.
krok 1.
ustawienia bloga --> szablon --> edytuj kod HTML poszukaj tagu <head> i zamiast niego wklej to:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

<head>
to sa akurat jezyki, ktora moga mi sie przydac. pelna lista dostępnych jest TU
wystarczy dodac linka z kolejnym brushem, by go używać

krok 2.
 kolejna przydatna rzecz, to tool zamieniajacy specjalne znaki htmla, na ich tekstowe odpowiedniki. http://www.elliotswan.com/postable/

krok 3.
teraz... jedyne co teraz trzeba zrobic, to uzyc naszego narzedzia.
ogolna zasada na przykladzie htmla:

<pre class = 'brush:html;'>
   jakis html...
</pre>

ten 'jakis html' to wersja po uzyciu postable, czyli z roznymi dziwnymi znaczkami zastepnujacymi znaki specjalne HTMLa.

EDIT: BARDZO wazne jest, by kod oraz pre i /pre wstawiac nie w graficznej edycji tekstu, a pod  edycja kodu HTML. inaczej calosc w ogole nie zadziala.

porownanie czystego tekstu z postable, z tym co widzimy na blogu:

POSTABLE:

&lt;pre class = &#39;brush:html;&#39;&gt;
   &lt;head&gt;
      jakis html...
   &lt;/head&gt;
&lt;/pre&gt;


BLOG:
<pre class = 'brush:html;'>
   <head>
      jakis html...
   </head>
</pre>

trzeba pamietac o tej konwersji, gdyz zamiast powyzszego, moze nam wyjsc to:
   
      jakis html...
   
przyklady.... 
JAVA:
 public synchronized static String convertStringToHex(String str) {

  char[] chars = str.toCharArray();

  StringBuffer hex = new StringBuffer();
  for (int i = 0; i < chars.length; i++) {
   hex.append(Integer.toHexString((int) chars[i]));
  }

  return hex.toString();
 }
JAVASCRIPT:
    <script type="text/javascript">
    var d = new Date();
    var time = d.getHours();

    if (time < 10) {
    document.write("<b>Good morning</b>");
    } else {
    document.write("<b>Good day</b>");
    }
    </script>

Brak komentarzy:

Prześlij komentarz