Selasa, 23 Agustus 2016

Cara menyematkan SyntaxHighlighter Java Script Library di Blogger Template

Syntax Highlighting di Blogger Engine

Pendahuluan

Saya telah menggunakan Blogger untuk blogging selama beberapa minggu. dan, sudah cukup terkesan melihat betapa mudahnya membuat untuk memperbarui blog agar terlihat bagus dan menggunakanya secara bebas dengan HTML untuk tata letak halaman.
Satu hal yang tampaknya kurang yaitu untuk memungkinkan pengembang untuk menyalin dan menyisipkan kode ke dalam blog dan memungkinkan pengguna lain untuk copy dan paste kode dari blog ke dalam kode mereka sendiri.

Dengan SyntaxHighlighter Javascript Library

Jadi saya googling dan menemukan post ini yang mengajari tentang penggunaan syntax highlighter.

Menambah Syntax Highlighter ke Blogger Template


  • Copy kode di bawah
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

  • paste ke dalam Blogger Template di atas </head> tag
  • Simpan template
  • Lalu mulai membuat kode blok di dalam Blog entries.
  • Ada 2 cara menambah kode blok syntaxhighlighter

Cara 1: Menggunakan script Tag


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

Menjadi:

1
2
3
4
5
6
7
8
9
10
11
// Comment
public class Testing {
    public Testing() {
    }
    public void Method() {
        /* Another Comment
           on multiple lines */
        int x = 9;
    }
}

Cara 2: Menggunakan the pre Tag


1
2
3
4
5
6
7
8
9
10
11
12
<pre class="brush: csharp">// Comment
public class Testing {
public Testing() {
}
public void Method() {
/* Another Comment
on multiple lines */
int x = 9;
}
}
</pre>

Menjadi :

1
2
3
4
5
6
7
8
9
10
11
// Comment
public class Testing {
    public Testing() {
    }
    public void Method() {
        /* Another Comment
           on multiple lines */
        int x = 9;
    }
}

Kode mengandung karakter lebih dari atau kurang dari

Jika kita mencoba posting menggunakan tanda < atau > dalam kode blok, kita harus meng enkode HTML'nya sebelum menyematkan dalam post seperti di sumber ini. contohnya seperti di bawah:


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

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.
di

Tidak ada komentar:

Posting Komentar