 |
| Screenshot SyntaxHighlighter Pada Blogger |
Dalam kesempatan kali ini saya ingin berbagi cara menambahkan SyntaxHighlighter pada postingan blog.
Untuk lebih jelasnya mengenai SyntaxHighlighter bisa anda temukan disini
http://alexgorbatchev.com/SyntaxHighlighter/
Oke langsung saja, pertama masuk ke akun Blogger anda
lalu pilih blog anda
pilih pengaturan
Template
lalu piih
Edit HTML
carilah code
</head> lalu paste script code dibawah ini di atas code </head> tersebut
<!-- SyntaxHighlighter by Alex Gorbatchev (afh4mz.blogspot.com) -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter by Alex Gorbatchev (afh4mz.blogspot.com) -->
Lalu klik
Simpan Template
Sekarang cobalah anda membuat entri/postingan baru
agar bisa menggunakan SyntaxHighlighter tadi gunakan pengeditan
HTML (lihat gambar)
lalu copy kan code berikut
<pre class="brush: html">
XXXX
</pre>
lalu kembalikan lagi ke pengeditan Compose biasa dan ubahlah XXXX dengan text/script yang ingin anda buat menjadi SyntaxHighlighter
CATATAN: terdapat kode "brush: html" --> sesuaikan kode nya dengan bahasa yang anda akan ketikkan, misal anda menggunakan bahasa C maka ubahlah menjadi "brush: c"
berikut daftar syntax/bahasa yang support untuk SyntaxHighlighter
| BRUSH NAME | BRUSH ALIASES | FILE NAME |
|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
- Brush Name adalah jenis syntax yang ingin digunakan
- Brush Aliases adalah class yang harus digunakan
- File Name adalah file .js yang diperlukan
Sekian cara untuk membuat SyntaxHighlighter pada postingan blog, semoga bermanfaat :)
