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:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Damien Walters

    Damien Walte

    20 AĞUSTOS 2006
  • expertvillage

    expertvillag

    5 NİSAN 2006
  • NYLON Video

    NYLON Video

    11 Aralık 2006