Syntax Highlighting - How to Make a Special Box Code (Syntax Highlighting) Valid AMP on Blogspot






What is Syntax Highlighter?

New bloggers like me interpret the Syntax Highlighter is a special box that contains the code.

So that in the title of the article I wrote How to Make a Special Box with a valid AMP Code. Not only valid for AMP blogs, this highlighter syntax code can also be used for non-AMP blogs.

In the tutorial How to Make a Special Box Code (Syntax Highlighter) Valid AMP on this Blogspot I want to emphasize the benefits of highlighter syntax and how to install valid AMP syntax highlighting.


Benefits of Syntax Highlighter

Syntax highlighting is very helpful for blogger friends who create articles with tutorial content. Like blogger tutorials, wordpress, js, php, etc. Because with the special box to put the code, the reader can distinguish the article sentence with the existing codes.

Syntax highlighter can also make a neat blogger friend's article and there is no error in the structure of the blog. Because if the codes are displayed without syntax highlighter by relying on compose on article posts, it can cause AMP to invalid blogger friends' blogs.


Install Syntax Highlighter

How to install a syntax highlighter on a valid AMspot blogspot is very easy. Just 5 steps, syntax highlighting on the AMP blog is possible. And blogger friends can make tutorials with code placement that is easy to read.

First, please back up a blogger friend template to anticipate amp-custom style errors is too long when tested in the AMP validator. If the blogger friend template has been backed up, when an invalid AMP error occurs because the style-amp is too long, the blogger friend can just restore the template by simply reuploading.

Second enter the theme menu> select edit html.

Third, please look for the amp-custom = 'amp-custom' style code. To simplify the search, blogger friends can use ctrl + f. Then copy the css code below right under the style amp-custom='amp-custom'.

pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;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;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#ffffff;display:block;margin:0;text-indent:15px}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;white-space:pre;overflow:auto}code .token.important {font-weight:bold;}code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;padding:2px;margin:0 2px;border-radius:2px;}pre[data-codetype="CSSku"]:before,pre[data-codetype="arief"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#000;}

<pre data-codetype = "text" title = "CSS Code">
<code class = "language-markup">
fill in the code you want to display here
</code> </pre>

Easy right? That's How to Make a Special Box Code (Syntax Highlighter) Valid AMP on Blogspot that I applied to my blog that also uses AMP templates.

If there are obstacles, please blogger friends can ask in the comments column. If useful, please share.