Syntaxhighlighter Tanpa Plugin

Sebenarnya bingung nih mau nulis apa, soalnya sejak kemarin keasyikan ngoprek-oprek CSS.

Salah satu yang saya oprek tampilannya nih bagian tag pre atau syntaxhighlighter. Tag pre berguna untuk mendefinisikan text tanpa format, misalkan kode html, kode php, kode css, kode komputer.

Sebelum pake tag pre, untuk menampilkanย Code Snippets menggunakan plugin SyntaxHighlighter Evolved. Namun kata para pakar blog, penggunaan plugin akan meningkatkan queri ke database, sehingga saya sudah tidak menggunakan pluginย SyntaxHighlighter Evolved.

Klo mau coba silahkan kopi kode CSS berikut :

pre{
width:auto;
overflow:auto;
height:auto;
background-color:#000000;
background-image:-moz-linear-gradient(#444444 50%, #505050 50%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%,#444444), color-stop(50%,#505050));
background-image:-webkit-linear-gradient(#444444 50%, #505050 50%);
background-image:-o-linear-gradient(#444444 50%, #505050 50%);
background-image:-ms-linear-gradient(#444444 50%, #505050 50%);
background-image:linear-gradient(#444444 50%, #505050 50%);
background-position:0 1px;
background-repeat:repeat;
background-size:48px 48px;
border-radius:5px;
color:#FFF;
line-height:24px;
font-size:16px;
margin-bottom:1.625em;
padding:24px;
border:5px solid #D5D6D8;
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
-moz-box-shadow: 0 0 10px 0 #000;
-webkit-box-shadow: 0 0 10px 0 #000;
box-shadow: 0 0 10px 0 #000;
}

Contohnya ada di sini.

Silahkan di coba ๐Ÿ˜€

Ngomong-ngomong, mau style tag pre lain bisa lihat di websitenya Mas Alwi. ๐Ÿ˜€


12 Comments

  • Tiyo Kamtiyono

    August 27, 2012

    Kunjungan balik,
    Bener – bener lagi seneng-senengnya belajar nih, semangat yak!

    Reply
  • bayu handono

    September 7, 2012

    hmm, kayak yg di DTE :]

    Reply
    • Dhimas Kirana

      September 8, 2012

      DTE? barusan liat nih, keren-keren trik CSS nya ๐Ÿ˜€

      Reply
  • Sulistyo

    September 12, 2012

    Nice, n akan lebih baik lagi jika css nya di “shorthand” mas.

    ex : FFFFFF, 000000, 444444 cukup diganti dengan FFF, 000, 444. Begitu juga dengan border, karena border left,top,right dan bottom color dan width nya sama cukup di define dengan : border:5px solid #D5D6D8

    Thanks,

    Reply
    • Dhimas Kirana

      September 12, 2012

      waduh, gag doong nih, coba deh ane pelajari, abis ane masih pemula banget nih. hehehe ๐Ÿ˜€
      makasih om, masukannya ๐Ÿ˜€

      Reply
  • Sulistyo

    September 12, 2012

    Sama-sama belajar mas.

    css “shorthand” maksudnya css nya dipendekin dalam hal penulisannya agar css kita nantinya akan lebih efisien.

    Contoh:
    color:#FFFFFF;
    cukup dituliskan dengan:
    color:#FFF

    border-left:5px solid #D5D6D8;
    border-top:5px solid #D5D6D8;
    border-right:5px solid #D5D6D8;
    border-bottom:5px solid #D5D6D8;
    cukup dituliskan dengan :
    border:5px solid #D5D6D8;

    Ingat, semakin efisien css kita, maka akan semakin baik pula performa (page loading) blog kita

    Thanks,

    Reply
    • Dhimas Kirana

      September 13, 2012

      ohhh, begitu yaa. makasih ya om masukannya. jadi doong nih ๐Ÿ˜€

      Reply
  • BlogS of Hariyanto

    January 20, 2013

    aku mohon izin..untuk duduk manis aja sambil menyimak ๐Ÿ™‚

    Reply
  • info-menarik.NET

    March 21, 2015

    Saya masih gunakan plugin mas untuk pasang kode PHP. Ok deh nanti dicoba triknya, terimakasih yaaaa … ๐Ÿ™‚

    Reply

Kebijakan Komentar (Mulai 16 Oktober 2015)

**Komentar akan ditampilkan setelah disetujui oleh admin.

**DILARANG MENGGUNAKAN FITUR KOMENTAR UNTUK PROMOSI. SEKALI PROMOSI AKAN LANGSUNG DIHAPUS.

**Mohon berkomentar yang bermutu sesuai dengan isi tulisan.

Leave a Reply