How to Add Syntax Highlighter on Blogger - Hallo Dear, djf-xp.blogspot.com, This article that you read this time with the title How to Add Syntax Highlighter on Blogger, We have prepared this article well for you to read and retrieve the information in it. hopefully the contents of we write can be understood by you. Alright, happy reading.
Title : How to Add Syntax Highlighter on Blogger
link : How to Add Syntax Highlighter on Blogger
How to Add Syntax Highlighter on Blogger
Syntax Highlighter is well known by various platforms, such as WordPress, Apache, Mozilla, Yahoo, Aptana, and many others. What is Syntax Highlighter? We bloggers often share scripts / code for bloggers or anyone who needs it for web / blog development. Most of us use a blockquote as a "container" of the script / code and mark it with some special color as an indicator or instructions. Well, SyntaxHighlighting is an effort to present the script / code in a better way and appearance based on the type of code, for example Javascript, CSS, HTML, Python, PHP, and many more. This idea is none other than the creator SyntaxHighlighter, Alex Gorbachev (thanks for the script).
There are several types of SyntaxHighlighter scripts, the latest is actually more sophisticated. But I will share the standard version because it has several options when the mouse is directed over the script (appears in the upper right corner), namely: View Source (in blank page, pop out), Copy to Clipboard, and Print. All three make it very easy to copy, view codes in their original form and order, and print codes. Each code is translated by a script called Brush.
On some platforms like WordPress, Drupal, and Joomla, we can use various types of modules or the SyntaxHighlighter plugin ready to use, but on Blogger, we have to add it manually. Next step by step:
Adding Script and Brush to the Template
1. Open the dashboard> template> edit HTML
2. Search ))> (ctrl + F and enter it in the search box, enter)
3. As well as a demo, here is an example of syntax highlighting. Hover the mouse over the script, in the upper right corner the options will appear, View Source, Copy to Clipboard, and Print. There is also a script info from the author. Copy the following script right below ))>.
4. Save the template.
Each of the brush scripts above serves to translate and style (color) various types of scripts / code such as HTML, JS, CSS, PHP, Perl, Python, Ruby, XML, Java, and various other standard scripts. If you only need it for highlighting certain scripts that you need, delete those that are not needed.
How to use SyntaxHighlighther in Blog Posts / Articles
Every type of code that you want displayed on a web page usually uses tags
, meskipun dalam beberapa hal juga bisa menggunakan tag . Untuk post blogger, kita akan menggunakan tag yang pertama. Kemudian masing-masing brush yang dibutuhkan dipanggil menggunakan atribut class. Contoh penulisannya:
Kode Di Sini
In the example above, we will see later that the types of code that will be highlighted are a combination of CSS, JS, PHP, SQL, and Python. If you only need a few types, if needed, then use the brush according to the type of script only. For example, if I only need HTML, JS, and CSS highlights, then what is needed is:
Kode Di Sini
Using only what is needed will save you load time and avoid unnecessary script load. So if you usually only share a mixture of code consisting of 3 common scripts above, use an arrangement like the last example.
Following are the steps to add Syntax Highlighter to Post:
1. When entering code, switch from "Compose" mode to "HTML" mode
2. Then enter the tag
dan class sesuai yang diinginkan, atau anda bisa copy contoh saya di atas.
3. Sebelum memasukkan kode di antara tag , anda harus parse dulu kode tersebut. Ini Penting. Karena jika tidak di parse, maka kode yang dimasukkan ke dalam editor HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse kode ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag .
Contoh yang benar:
And the following results:
4. You can return to "compose" mode if you want to continue writing, before publishing the article.
5. Done.note: the script will be loaded last by the browser, so it will appear later after all scripts and elements have been loaded first. So syntaxt highlighter will appear last.
That's how to use Syntax Highlighter correctly on Blogger. You can actually also use the same method on other websites, if you want to add it manually of course. Syntax Highlighter for Blogger above still uses the default color scheme, there are a number of variations of other color schemes that I will share in the future. Too. That's it for now and have a nice blogging, as always. :)
Thus the article How to Add Syntax Highlighter on Blogger
You are now reading the article How to Add Syntax Highlighter on Blogger with the link address https://djf-xp.blogspot.com/2019/10/how-to-add-syntax-highlighter-on-blogger.html