sábado, 19 de novembro de 2016

Como instalar Syntax Highlighting blogger post



Como instalar Syntax Highlighting blogger post

Hoje vamos mostrar como instalar no seu blogger template função Syntax Highlighting by mastanvan mas para que serve isso? pois bem trabalha com código então pode deixar o código mais bonito isso é especifico para postagem que utilizam código cada vez que instalar um tutorial apresentado por código seja isso HTML CSS JAVASCRIPT E JQUERY isso vai ser mostrado em um fundo preto com a escrita do código colorido isso é util se deseja adicionar isso no seu template siga os passos:


Adicionando syntax Highlighting no blogger post Faça login no seu Template:

Então clique no menu modelo editar HTML 
com as teclas combinadas CTRL+F busque por:
</body>

Então antes disso copie e cole o seguinte código: 


<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/syntaxmas.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Então acima de </head> copie e cole o seguinte código:


<style type='text/css'>
pre{position:relative}
pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';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{-moz-user-select:none;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[data-codetype="tamvanCSS"]:before,pre[data-codetype="tamvanHTML"]:before,pre[data-codetype="tamvanJS"]:before,pre[data-codetype="tamvanJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
.hljs:hover{overflow:auto}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
</style>

Salve isso. 

Agora quando for postar utilizar um post com um tutorial de código  clique na aba HTML e copie uma das selecionadas abaixo correspondente :


Para  HTML use 
<pre data-codetype="tamvanHTML" title="HTML">
<code>
aqui vai o código 
</code>
</pre>


Para CSS use
<pre data-codetype="tamvanCSS" title="CSS">
<code>
aqui vai o código 
</code>
</pre>


Para  Javascript use 
<pre data-codetype="tamvanJS" title="Javascript">
<code>
aqui vai o código 
</code>
</pre>

ParajQuery Use
<pre data-codetype="tamvanJQ" title="JQuery">
<code>
aqui vai o código 
</code>
</pre>

Lembre-se de substituir o realçado em amarelo pelo código então salve e pronto.



NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner