Showing posts with label syntax. Show all posts
Showing posts with label syntax. Show all posts
Sunday, November 27, 2016
CARA INSTALL Syntax Highlighter di Blog KEREN !
CARA INSTALL Syntax Highlighter di Blog KEREN !
Kali ini bloggingpasuruan akan Share Cara Membuat kolom Syntax Highlight yang berfungsi sebagai menampilkan kode tutorial seperti yang digunakan pada website atau blog tutorial. Memang banyak situs atau blog yang membahas tentang cara menginstal dan menggunakan stabilo sintaks dan kode berbagi dan cara menginstal sintaks stabilo di blog dan website (baik menggunakan javascript, jQuery, dan HTML markup) sebagai Prisma, GeSHi, Google Code, SyntaxHighlighter , Sintaks Highlight dalam JavaScript, Ultraviolet dan lain-lain, tapi di sini saya lebih memilih HIGHLIGHT. Ini menggunakan java script dengan alasan dapat bekerja lebih mudah dan secara otomatis menemukan blok kode, mendeteksi jenis bahasa, dan menyoroti (kode sorot).
HIGHLIGHT.JS mengenali setidaknya 54 program bahasa dan dibundel dengan 26 tema gaya. Untuk itu saya hanya akan memilih menjadi kode hanya 3 bahasa, yang paling sering digunakan oleh blogger (dalam membuat tutorial di blog-nya) sebagian besar blogger hanya untuk menampilkan kode sumber, seperti kode CSS, Javascript, dan HTML mark up. sebelum kami membuat, pertama kita mengidentifikasi rasa apa itu Sorot Sintaks
DEFINISI Syntax Highlighter
Syntax Highlighter atau Sintaks Sorot editor teks ini tampil menyorot teks-terutama kode sumber-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter kemudahan dalam menulis kode sumber atau bahasa terstruktur seperti bahasa pemrograman atau markup language (bahasa markup) akan tampak lebih profesional dan rapi.
Penggunaan sintaks higlighter pada halaman web, blog atau forum online sering digunakan sebagai kode prensentasi kode sumber sampel (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Jawa, SQL, Apache, Haskell, Erlang, Ruby, C ++, Objective C dan banyak bahasa pemrograman lain.) yang ingin ditampilkan.
CARA INSTALL Syntax Highlighter
Untuk menginstal Sntax Highlighter di blog, langkah pertama yang harus dilakukan adalah untuk menempatkan script ini tepat di atas </ head> atau bisa juga sebelumkode </ body>
<div style="text-align: justify;"><br /><script src=" https://syntax-bloggingpasuruan-highlighter.googlecode.com/svn/syntaxhighligh-bloggingpasuruan.js"></script></div><br /><code><div style="text-align: justify;"><br /><script>hljs.initHighlightingOnLoad();</script></div><br />
Langkah selanjutnya adalah memasang CSS untuk menyesuaikan gaya dari Syntax Highlighter. Letakkan kode CSS dibawah ini juga di atas </ head>
CSS Syntax Highlighter
<div style="text-align: justify;"><br />/* CSS SYNTAX HIGHLIGHT Oleh Bloggingpasuruan.blogspot.com <span style="text-align: left;">*/</span></div><br /><code>pre code {<br /><div style="text-align: justify;"><br />; padding: 0.5em;<br />color: #DCCF8</div><br />display: bloc<br />kF;<br /><div style="text-align: justify;"><br />ground: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;}<br />pre</div><br />bac<br />k .comment,<br />pre .template_comment,<br />pre .diff .header,<br />pre .doctype,<br />pre .lisp .string,<br />pre .javadoc {<br /><div style="text-align: justify;"><br />avascript .title,</div><br />color: #586e75;<br /> font-style: italic;<br />}<br />pre .keyword,<br />pre .css .rule .keyword,<br />pre .winutils,<br />pre .<br />j<br />pre .method,<br />pre .addition,<br />pre .css .tag,<br />pre .clojure .title,<br />pre .nginx .title {<br /> color: #B64926;<br />}<br />pre .number,<br /><div style="text-align: justify;"><br />66;<br />}<br />pre .ti</div><br />pre .command,<br />pre .string,<br />pre .tag .value,<br />pre .phpdoc,<br />pre .tex .formula,<br />pre .regexp,<br />pre .hexcolor {<br /> color: #468<br />9tle,<br />pre .localvars,<br />pre .function .title,<br />pre .chunk,<br />pre .decorator,<br />pre .built_in,<br />pre .lisp .title,<br />pre .clojure .built_in,<br /><div style="text-align: justify;"><br />ant,<br />pre .class </div><br />pre .identifier,<br />pre .id {<br /> color: #FFB03B;<br />}<br />pre .attribute,<br />pre .variable,<br />pre .lisp .body,<br />pre .smalltalk .number,<br />pre .cons<br />t.title,<br />pre .parent,<br />pre .haskell .type {<br /> color: #b58900;<br />}<br />pre .css .attribute {<br /> color: #b89859;<br />}<br />pre .css .number,pre .css .hexcolor{<br /><div style="text-align: justify;"><br />f .change,<br />pre .s</div><br />color: #DCCF8F;<br />}<br />pre .css .class {<br /> color: #d3a60c;<br />}<br />pre .preprocessor,<br />pre .pi,<br />pre .shebang,<br />pre .symbol,<br />pre .symbol .string,<br />pre .di<br />fpecial,<br />pre .attr_selector,<br />pre .important,<br />pre .subst,<br />pre .cdata {<br /> color: #cb4b16;<br />}<br />pre .deletion {<br /> color: #dc322f;<br />}<br />pre .tex .formula {<br /><div style="text-align: justify;"><br /></div><br />background: #073642;<br /><div style="text-align: justify;"><br /></div><br />}
Simpan template. Untuk menggunakan Syntax Highlight pada saat menulis posting, kita hanya perlu menambahkan tag <pre> dan <code>
Seperti ini :
<div style="text-align: justify;"><br /><pre><code></div><br /><code><div style="text-align: justify;"><br />Letakkan kode Javascript, jQuery atau CSS kode atau HTML kode disini</div><br /><div style="text-align: justify;"><br />nama blog sobat disini......</code></pre></div><br />
Selesai.
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel CARA INSTALL Syntax Highlighter di Blog. Semoga bermanfaat dan terima kasih..
Available link for download
Saturday, October 8, 2016
Cara Membuat Syntax Highlighter di Blog
Cara Membuat Syntax Highlighter di Blog
Salam Blogger, Artikel bloggingpasuruan kali ini tutorial tentang Cara Membuat Syntax Highlight di Blog, Syntax Highlight Adalah fitur dari beberapa editor teks yang menampilkan teks, terutama source code dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memudahkan kita dalam menulis dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa mark-up.
Berikut Cara Membuat Syntax Highlight di Blog
1.) Login Ke Blogger Sobat
2.) Pilih menu Template >> Edit HTML
3.) Cari kode ]]></b:skin> menggunakan CTRL + F
4.) Jika sudah menemukan, copy CSS dibawah dan letakkan kode di bawah ini sebelum kode ]]></b:skin> :
.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-ab
Read more »
Available link for download
Subscribe to:
Posts (Atom)