Caixa de Códigos com Opção para Copiar e Imprimir

Há algum tempo postei sobre como usar a caixa de códigos SyntaxHighlighter e prometi trazer esse tutorial com a função copiar.
Pois então, é isso que faremos nesse post; a caixa de códigos funciona assim: quando você posicionar o mouse sobre ela, vão aparecer 3 imagens, as estrelas que vocês verão no exemplo, cada uma serve para: copiar todo o código, imprimi-lo e ver os créditos ao autor. Veja o resultado aqui.
1. Cole o código abaixo antes de </body> no html do seu template:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: none !important;
    color: #f9cccc !important;
    text-align: left !important;
    float: none !important;
    vertical-align: baseline !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.1em !important;
    font-family: &quot;Consolas&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 14px !important;
    min-height: inherit !important; /* For IE8, FF  WebKit */
    min-height: auto !important; /* For IE7 */
}
 
.syntaxhighlighter
{
    width: 99% !important;
    margin: 1em 0 1em 0 !important;
    padding: 1px !important;
    overflow: auto;
    position: relative !important;
}
 
.syntaxhighlighter .bold
{
    font-weight: bold !important;
}
 
.syntaxhighlighter .italic
{
    font-style: italic !important;
}
 
.syntaxhighlighter .line
{
    background: #fff4f4 !important;
}
 
.syntaxhighlighter .no-wrap .line .content
{
    white-space: pre !important;
}
 
.syntaxhighlighter .line table 
{
    border-collapse: collapse !important;
}
 
.syntaxhighlighter .line td
{
    vertical-align: top !important;
}
 
.syntaxhighlighter .line .number
{
    width: 3em !important;
}
 
.syntaxhighlighter .line .number code
{
    width: 2.7em !important;
    padding-right: .3em !important;
    text-align: right !important;
    display: block !important;
}
 
.syntaxhighlighter .line .content
{
    padding-left: .5em !important;
}
 
.syntaxhighlighter .line .spaces
{
}
 
/* Disable border and margin on the lines when no gutter option is set */
.syntaxhighlighter.nogutter .line .content
{
    border-left: none !important;
}
 
.syntaxhighlighter .bar
{
    display: none !important;
}
 
.syntaxhighlighter .bar.show
{
    display: block !important;
}
 
.syntaxhighlighter.collapsed .bar
{
    display: block !important;
}
 
/* Adjust some properties when collapsed */
 
.syntaxhighlighter.collapsed .lines
{
    display: none !important;
}
 
.syntaxhighlighter .lines.no-wrap
{
    overflow: auto !important;
    overflow-y: hidden !important;
}
 
/* Styles for the toolbar */
 
.syntaxhighlighter .toolbar
{
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
    font-size: 1px !important;
    padding: 8px 8px 8px 0 !important; /* in px because images don&#39;t scale with ems */
}
 
.syntaxhighlighter.collapsed .toolbar
{
    font-size: 80% !important;
    padding: .2em 0 .5em .5em !important;
    position: static !important;
}
 
.syntaxhighlighter .toolbar a.item,
.syntaxhighlighter .toolbar .item
{
    display: block !important;
    float: left !important;
    margin-left: 1px !important;
    margin-top: -5px !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    text-indent: -5000px !important;
}
 
.syntaxhighlighter.collapsed .toolbar .item
{
    display: none !important;
}
 
.syntaxhighlighter.collapsed .toolbar .item.expandSource
{
    display: inline !important;
    text-indent: 0 !important;
    width: auto !important;
    float: none !important;
    height: 16px !important;
    padding-left: 20px !important;
}
 
.syntaxhighlighter .toolbar .item.viewSource
{
    background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png&#39;) !important;
}
 
.syntaxhighlighter .toolbar .item.printSource
{
    background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png&#39;) !important;
}
 
.syntaxhighlighter .toolbar .item.about
{
    background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png&#39;) !important;
}
 
 
.line.alt2 {
    background: white !important;
}
 
/* Gutter line numbers */
.syntaxhighlighter.printing .line .number
{
    color: #ffd5d5 !important;
}
</style>
<script src='https://kawaiiicode.github.io/shCore.js' type='text/javascript'/> 
<script src='https://kawaiiicode.github.io/shBrushCSharp.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
</b:if> 

Onde estiver escrito...
color ou background = altere as cores (veja uma tabela de cores aqui)
width= altere as larguras; em width: 99% !important; - mude o número para um menor caso queira diminuir a largura da caixa.
Para alterar a imagem da estrela, mude:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png

Quando quiser usar em alguma postagem para compartilhar códigos, você deve inserir no HTML da postagem:
<pre class="brush: c-sharp;">SEU CÓDIGO AQUI</pre>
Na área em que você insere os códigos (seu código aqui) cole o que for compartilhar; eu geralmente uso esse site para postar o código no html e ele apareça conforme deve ser usado pelos leitores.
E é isso. Espero que gostem.

Imagem: Weheartit






Postar um comentário

0 Comentários

up