Cara Menampilkan Koding dalam Postingan Blogger

Saya telah menggunakan blogger cukup lama, namun baru sekarang ini saya mau memulai untuk posting kembali. hahahaha.
Saya sudah cukup terkesan dengan betapa mudahnya untuk memperbarui tampilan dan nuansa blog Anda dan seberapa bebas Anda dengan HTML dan tata letak semantik halaman.
Saya rasa agak aneh kalo kita sedang membagikan teks syntak suatu kode namun barisan kode itu sama dengan kode yang lainnya, pasti akan terlihat begitu membingungkan. 
Satu hal yang sepertinya hilang adalah memungkinkan pengembang untuk menyalin dan menempelkan kode ke blog mereka dan memungkinkan pengguna lain untuk menyalin dan menempelkan kode dari blog ke kode mereka sendiri.


Using SyntaxHighlighter Javascript Library

Jadi dalam pencarian saya untuk menemukan sesuatu yang lebih baik saya menemukan posting ini yang menggunakan sintaks stabil.

Adding Syntax Highlighter to Blogger Template

•  Copy the following code

<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>

 

<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>

<script language='javascript'>

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>

 

</script>

• paste it into your Blogger Template just above the </head> tag
• Save the template
• Then you can start creating code blocks in your existing or new Blog entries.
• There are 2 ways to add a code block using syntaxhighlighter

 

Metode 1: Menggunakan Script Tag

<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>

 

<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>

<![CDATA[

 

// Comment

public class Testing {

public Testing() {

}

 

public void Method() {

/* Another Comment

on multiple lines */

int x = 9;

}

}

]]></script>

</script>

 

akan menjadi

 

 

Metode 2: Menggunakan Pre Tag

 

akan menjadi :

 

Code Containing Less that or Greater than

One person noticed that if you try and publish any code with < or > in it, you'll need to HTML Encode the code before adding it to the blog post using something like this. Then you'll be able to publish code with generic's such as the following:

 

 

<script type=&quot;syntaxhighlighter&quot; class=&quot;brush: csharp&quot;>

static Dictionary<int, List<Delegate>> _delegate = new Dictionary<int, List<Delegate>>();

</script>

 

Conclusion

I have to say i'm pretty impressed. There are a couple of things you have to watch out for:

• The java script uses the <code> Tag. So as lots of blogger templates have styles for this tag you have to remove any styles before it looks like the above.
• If you paste in HTML or XML with <Tags>. You'll need to HTML encode them. Which is a bit of a shame, as i was hoping the CDATA would help get around that problem. Maybe in the next version.