De todos os meus artigos, existem 2 posts de tutorial, que sempre coloco o código HTML, CSS e JQUERY. Nunca sentiu curiosidade de saber qual era o nome da caixa preta? E como fazer isso?
Como o título acima diz, o nome da caixa preta é Syntax, seu uso é claro para colocar códigos HTML, CSS ou JS em posts. Agora como você faz isso? Ok, vamos apenas seguir o seguinte tutorial.
Como fazer uma Syntax Highlighting no Blogger/Blogspot
1. Entrar no seu Blog -> Abrir tema -> Clique em Editar HTML
2. Em seguida, coloque o seguinte código CSS acima/antes da tag ou .
/* CSS Syntax Highlighter - neqxus.blogspot.com */
.post-body pre{position:relative;overflow:auto;background:#333;color:#ddd;font-size:12px;max-height:500px;font-family:monaco,'Courier New',monospace;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
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:#212121;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;user-select: all;}
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:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#ffffff;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{font-family: sans-serif;background-color:#fff;box-shadow:inset 0 0 0 1px #eee}3. Salve o modelo!
4. Como usá-lo é muito fácil, basta fazer um novo post e copiar o seguinte código HTML:
<pre data-codetype="HTMLku" title="HTML"><code> ... KODE ... </code></pre>
<pre data-codetype="JavaScriptku" title="JavaScript"><code> ... KODE ... </code></pre>
<pre data-codetype="CSSku" title="CSS"><code> ... KODE ... </code></pre>
<pre data-codetype="JQueryku" title="JQuery"><code> ... KODE ... </code></pre> 5. Escolhar um dos códigos HTML acima, por exemplo, se você quiser postar código HTML, use o seguinte código:
<pre data-codetype="HTMLku" title="HTML"><code> ... KODE ... </code></pre>6. Veja a prévia do post e os resultados. Ok, então este breve tutorial que fiz espero ajudar os amigos blogueiros a resolver problemas que estão sendo experimentados e se você acha que há dificuldades neste tutorial, por favor, deixe um comentário. Se Deus quiser, eu vou responder o mais rápido possível.
P.S.: Também pode ser usado para a WordPress.