របៀបដាក់ភាសាកូដ ដើម្បីបង្ហាញ នៅក្នុងអត្ថបទរបស់អ្នក [Style 3]

Adding syntax highlighter to your Blogger will make more beautiful and specific code with formatting to look at. You can use this method to highlight for HTML, CSS, JavaScript, PHP, Python, C, C++, JAVA, PERL, XML, XHTML and much other typical codes by using code-prettify. Why you will choose code-prettify:
1. code-prettify is built by Google.
2. It is fully responsive.
3. Easy to use.
4. Faster loading than other syntax highlighters.
5. Access several themes.

How to add Syntax Highlighter to Blogger:

1. Install Google Code Prettify JavaScript:

Go to blogger dashboard and then Edit HTML. Add the following script code before </body> tag.

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

2. Install Syntax Highlighter Theme CSS:

Next, you have to install Syntax Highlighter Theme CSS. I have put several CSS on several themes at the end of the post. Choose one of them. You will get the link for the CSS code. Just visit the link in new tab. Copy the whole CSS and paste just before </head> of your Blogger theme.

3. Use Syntax Highlighter while posting:

After saving your template, you are ready to use syntax highlighter on your blogger. Copy the following code and paste to where you want to show. If you want to create post/page then enable Compose to HTML and put your code to be highlighted according to below.

<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>

Above the code is for HTML. If you want to use syntax highlighter for specific style or language, you must replace language-HTML with language-value. Given the value and attribute of some style or language:

Highlight For	value	Attribute
HTML	html	language-html
CSS	csh	language-
JavaScript	js	language-js
XML	xml	language-xml
xHTML	xhtml	language-xhtml
C	c	language-c
C++	cpp	language-cpp
C#	cs	language-cs
PHP	php	Language-php
Python	py	language-py
Java	java	language-java
Ruby	rb	language-rb
Perl	perl	language-perl

*** Beware before using HTML or JavaScript to be syntax highlighted! If you directly copy and paste HTML or JavaScript, it won’t show. Because Blogger CMS will execute this code as you paste HTML or JavaScript on HTML format. But don’t worry. You have to just parse your HTML or JavaScript code to XML and it is easy. You can do it just by pasting your code into this tool. For better beautification of any code, you should use parsed code.
Background and Color Customization
If you want to customize background and color, it is possible to make easily. What we used before is the default theme. You can choose the different theme from the below demo. To activate specific theme, you have to copy the stylesheet and put into before </b:skin>
Theme One: Default

For the above theme copy the code before </head>

<!--Default theme-->
<style type="text/css">.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}</style>

Theme Two: Desert by Anatoly Techtonik

For the above theme copy the code before </head>

<!--Desert theme-->
<style type="text/css">pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

Theme Three: Sunburst by David Leibovic

For the above theme copy the code before </b:skin>

<!--SunBurst theme-->
<style type="text/css">code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

Theme Four: Sons-Of-Obsidian by Alex Ford

For the above theme copy the code before </head>

<!--Sons of Obsidian theme-->
<style type="text/css">.str{color:#EC7600}.kwd{color:#93C763}.com{color:#66747B}.typ{color:#678CB1}.lit{color:#FACD22}.pln,.pun{color:#F1F2F3}.tag{color:#8AC763}.atn{color:#E0E2E4}.atv{color:#EC7600}.dec{color:purple}pre.prettyprint{border:0 solid #888}ol.linenums{margin-top:0;margin-bottom:0}.prettyprint{background:#000}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}@media print{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006}.atn{color:#404}.atv{color:#060}}</style>

Theme Five: Doxy by Robert Sperberg

For the above theme copy the code before </b:skin>

<!--Doxy theme-->
<style type="text/css">a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>

If you get this article helpful or you have trouble to add Google Code Prettify, please share with me on the comment section. Happy Blogging.


ប្រភពពី Compromath
រៀបរៀងដោយ អាស្វាដែក