CSS Syntax Highlighter Like Sublime Text

CSS Syntax Highlighter Like Sublime Text
Thursday, May 21, 2020

How to Install Syntax Highlighting Like Sublime Text
Please enter the Edit HTML Blogger. Place the code below above the code </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Syntax Highlighter Sublime */
.post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
.post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
  pre,pre code{white-space: pre-wrap;}
.hljs {
  display: block;
  overflow-x: auto;
  padding:0 0.5em 0.5em;
margin:0;
  background: #23241f;
max-height:360px;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}
.hljs::-webkit-scrollbar{width:8px;height:25px;}
.hljs::-webkit-scrollbar-thumb
{border-radius:2px; background:rgba(255,255,255,.2)}
</style>

Next, look for the code </body> or &lt;!--</body>--&gt;&lt;/body&gt; then add the following code above the code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>

After that, Save the Theme.

How to use Syntax Highlighter in Blog Posts


First, place the code in the Compose tab. After that, please click the HTML tab. Then edit the code like this:

<pre><code>

The CSS / JavaScript / PHP code is located here

</code></pre>

Note the steps in the following image:


Then like this:

Note:
Why do you have to put the code in the Compose tab first? So that the code in the form of JavaScript, jQuery, PHP, JSON, HTML and others will be converted automatically. So you don't need HTML Converter to convert code..

Syntax Highlighter Writing Further

Now, so that Syntax Highlighter displays more specific color variations on the code, you can create a format like this:

<pre><code class="css">

CSS code here

</code></pre>

or:


<pre><code class="javascript">

JavaScript code here

</code></pre>

or:


<pre><code class="html">

HTML code here

</code></pre>

or:


<pre><code class="php">

PHP code here

</code></pre>

Etc.

May be useful!

Source:
  • bungfrangki.com

0 Response to "CSS Syntax Highlighter Like Sublime Text"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel