SORU
5 Aralık 2009, CUMARTESİ

Nasıl blogger/blogspot ile güzelleştirmek başka kullanacak?

Blogger.com programlama bazı metinler barındırmak için kullanıyorum, ve güzelleştirmek başka (stackoverflow gibi) güzel kod örnekleri için renk kullanmak istiyorum.

Nasıl blog alanına da güzelleştirmek başka komut kurarım?
Daha doğrusu onun (mümkünse), paylaşılan bir kopyasını bir yere bağlamak olur mu?
Farklı bir etki alanı var. Bu işe yarar mı?

Çok teşekkürler.

CEVAP
15 Aralık 2009, Salı

Blogger yeni bir giriş yaptığınızda, giriş HTML kullanımı ve blog girdileri Düzenle seçeneği çıkar.

bu yüzden yazın http://blogger.com , sonra giriş, Nakil^ o zaman . Mesaj^ Düzenleyin . Edit orada üstüne bu yerleştirin:

<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

prettyPrint kullanmanız gerektiğini unutmayındoğrudanbir olay işleyicisi, karıştırır (ayrıntılar için the readme). addLoadEvent sonra dönüp prettyPrint çağıran bir işlev geçiyoruz ediliyor.

Blogger bize stil bağlamak için izin vermez, çünkü bu durumda, biz sadece güzelleştirmek başka gömün.css içeriği.

Ekle <code></code> bir etiket veya bile "prettyprint lang-html" böyle dilini belirleyebilirsiniz. "prettyprint" sınıf adı <pre></pre> bir etiket

bu gibi görünmesini sağlar

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

ya da bu gibi

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

oraya kod HTML temizlemiş < ve ^ gerekiyor . sadece buraya kodu yapıştır bunu: http://www.simplebits.com/cgi-bin/simplecode.pl

Eğer isterseniz varsayılan olarak tüm sayfalar için dahil HTML düzeni üst kodu koyabilirsiniz.

güncelleme Şimdi blogger CSS dosyalarını bağlayabilirsiniz yani <head> bunu eklemek yeterli olacaktır

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

Seçtim değil değiştirmek için vücut yüklendiğinde olay bilerek, onun yerine ben kullanıyorum yeni DOMContentLoaded olay eski tarayıcılar yok Destek ihtiyacınız olursa eski tarayıcı desteği, kullanabilirsiniz herhangi bir diğer yük olayı başlatmak prettyPrint, örneğin bir WordPress kullanmak:

jQuery(function($){
    prettyPrint();
});

ya güya 21* *şimdiye kadar

ve bitti :)

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Paylaşılan BarındırmaJavascriptBloggerShared-hostingBlogspotBloggerJavascript Güzelleştirmek BaşkaBlogspot

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Ampisound

    Ampisound

    12 Kasım 2006
  • Jeremy Gallman

    Jeremy Gallm

    11 NİSAN 2012
  • Rachel Raum

    Rachel Raum

    10 EYLÜL 2007

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR