MitraIde

News

Cari Di Situs Ini

Selasa, 24 Agustus 2021

Cara membuat kotak source code agar lebih rapi saat ditampilkan di blog atau webstite

Hallo  teman-teman kali ini kali ini kakak akan share cara memebuat kotak source di blogg, apa itu  kotak souce tentu teman-teman tidak asing dengan code source seperti ini bukan ?



Sudah tidak asing bukan?

Nah kakak akan share Cara membuat kotak source code program PHP atau bahasa pemrograman lain pada HTML atau blog, Case ini bermula ketika saya ingin menampilkan code PHP ke dalam web atau blog menjadi lebih rapi.

Oke tanpa berlama-lama lansung saja copy paste code berwarna orange code berikut, 
          
 echo "Selamat datang di Blog mitraide";     
          
     


<html>
     <head>

          <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css" rel="‘stylesheet’/"></link>
          <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js">
          <script>hljs.initHighlightingOnLoad();</script>
     </head>
<body>
     <pre style="background-color: grey;">
          <code style="color: white;">
 echo "Selamat datang di Blog mitra ide";     
          </code>
     </pre>
</body>
</html>


Dan code PHP akan terlihat lebih rapi

opsi lain yang lebih sering kakak gunakan adalah seperti berikut ini, karena lebih praktis dan tidak membutuhkan link cdn, tentu lebih cocok digunakan di blogg


adapun opsi lain yang sering kak mitra gunakan adalah dengan copy paste perintah berikut ini dikarenakan lebih praktis, hehe dan cara ini berjalan dengan baik untuk kak mitra

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<ini contoh code anda>>>>>>>

       </code>
 </pre>