How to Make Syntax Highlighter Valid AMP - Syntax Highlighter is a text editor that serves to display text in the form of source code or code markup in a web page, so that visitors can clearly know the difference between plain text with source code .
Generally Syntax Highlighter has a cool appearance with colorful text, but now I will make it with a simple look but still cool.
Usually, Syntax Highlighter is intended for Blogs or Webs that discuss programming code. Just for example on this blog.
Today I will give a little tutorial to make Syntax Highlighter for AMP valid blogs. Because a valid blog AMP can't use JavaScript, so I only use CSS in its implementation.
How to Install the Highlighter Syntax on the Valid AMP Blog
.post-body pre and also .post-body pre code. If there is, delete the code so that it does not interfere with the display.
Next, add the following code right below
<style amp-custom='amp-custom'>
.post-body pre {
background: #292E34; /* background color */
border-left: 5px solid #1d7b8d; /* variantion left border */
padding:8px 10px; overflow:scroll; max-height:200px; margin:10px auto;
}
.post-body pre code {
color: #BFBF90; /* font color */
font-size: 14px; /* font size */
line-height: 1.5em; /* font height */
font-family:Consolas,Monaco,'Andale Mono',monospace; white-space:nowrap; word-spacing:normal; word-break:normal; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
pre::-webkit-scrollbar {
background-color: #cacaca; /* scroll color*/
width: 5px;height: 5px;
}
pre::-webkit-scrollbar-thumb {
background-color: #6f7a88; /* background scroll color */
}
How to use Highlighters Syntax on the Valid AMP Blog
Its use is very easy, enough to write the following html code<pre><code> dan masukkan semua kode what you want to display in the highlighter syntax column. Then close with </pre></code>
every code that is applied to Syntax Highlighter is required to be parsed first through the following link. Blogcrowds so as not to make the template look damaged.
For more details, please look at the Highlight Syntax below.
<pre><code>
<!-- Enter all CSS, HTML or Javascript code here -->
</pre></code>
You can see the demo on this blog, and for more details, check it through Codepen.
There are many ways to make this syntax highlighter, one of which uses javascript. And what I apply to this post is using CSS.
I chose to use CSS because besides Blog AMP I can't use Javascript, also because it uses CSS that is lighter so it doesn't burden loading Blog.