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 == "item"'>
<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: "Consolas", "Bitstream Vera Sans Mono", "Courier New", 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'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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png') !important;
}
.syntaxhighlighter .toolbar .item.printSource
{
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png') !important;
}
.syntaxhighlighter .toolbar .item.about
{
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwomgZZVhjLZb9aWVL8al7os49i58FEBDRKNhZTmZ75f8Z1OEv9mGbtgG-kqIYwbCYuivMGQ_LcT1sw0o9LcgSdBCBhhgkLK4rk387UHpP9uzTZrAwbsQDHC9ngwqb9VTv7EJR9a8TOCUi/s1600/star.png') !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
0 Comentários
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart