Blogger Highlighter ile Renkli Kod Paylaşımı

5/09/2016
Blogger sözdizimi prizması dediğimiz Highlighter ile blogunuzda paylaşmış olduğunuz CSS, HTML, jQuery ve Javascript kodlarını renkli ve satır numaralı olarak paylaşma imkanı sunan blogger eklentilerindendir.

Blogger Highlighter ile Renkli Kod Paylaşımı

Fazla kullanım alanı bulunmayan bu eklentinin özellikle kod paylaşımı yapan blog yazarları tarafından tercih edilen kod sözdizimi prizmasıdır. Blogger Eklentileri olarak ilk kez paylaşılan bu eklenti blog sitelerinin sadece tasarım olarak farklı görünmesine yarayan bir eklentidir. Blogunuzda her hangi bir yavaşlama yada kasma dediğimiz sorun olmamaktadır.

Blogger Highlighter ile Renkli Kod Paylaşım Eklentisi Nasıl Kurulur?

1. Blogger hesabınıza giriş yapın ve kumanda panelinden Şablon > HTML'i Düzenle tıklıyoruz ve CTRL+F yardımıyla </style> yada ]]></b:skin> kodunu bulun ve aşağıdaki CSS kodunu </style> yada ]]></b:skin> kodunun bir satır üzerine ekleyin.
/* Blogger Eklentileri CSS Highlighter (URL: http://bloggereklentileri.blogspot.com/) */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Seçmek için çift tıklayın';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}
2. Aşağıdaki javascript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin. NOT: Aşağıdaki Javascript </body> kodu üzerinde uyum sağlamaması durumunda </head> kodunun bir satır üzerine ekleyerek deneyin.
<script src='https://cdn.rawgit.com/jquerycods/12354/master/highlighter.js' type='text/javascript'/>
3. Yeni bir blog yayını oluşturduğunuzda ve kod paylaşımı yapmak istediğinizde, paylaşmak istediğiniz kod CSS, HTML, jQuery ve Javascript hangisi ise aşağıdaki HTML kodlarda belirtilen renkli alana HTML Dönüştürücü ile kodunu dönüştürün ve dönüştürülmüş kodu renkli anlana ekleyin ve oluşturmuş olduğunuz yeni yayının alt bölümüne ekleyin.
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... Paylaşmak istediğiniz HTML kodunu buraya ekleyin ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... Paylaşmak istediğiniz CSS kodunu buraya ekleyin ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... Paylaşmak istediğiniz JavaScript kodunu buraya ekleyin ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... Paylaşmak istediğiniz JQuery kodunu buraya ekleyin ... </code></pre>

Blogger Eklentileri
Blogger Highlighter ile Renkli Kod Paylaşımı hakkında daha fazla bilgi için iletişim sayfasından yada yorum bölümünden bize ulaşabilirsiniz.
Blogger Renkli Kod Paylaşım Eklentisi

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

3 yorum

dostum bu senin kod pencereni nasıl ayarlarım ?

Cevap

Bu kodlamada bir problem var hemen düzenliyorum.

Cevap