Html Css Javascript Viewer

MUAZHAN

6 min read

·

Jun 22, 2024

26

Share

Membangun Viewer HTML, CSS, dan JavaScript

Membangun viewer untuk HTML, CSS, dan JavaScript memungkinkan Anda menampilkan kode sumber dalam format yang mudah dibaca dan diakses. Viewer ini berguna untuk berbagi kode, dokumentasi, atau pembelajaran. Berikut adalah panduan dasar untuk membangun viewer tersebut:

1. Struktur HTML

  
  


  

    

      

        HTML
        Salin Kode
      
      

    
    

      

        CSS
        Salin Kode
      
      

    
    

      

        JavaScript
        Salin Kode
      
      

    
  
  

Struktur HTML ini terdiri dari:

• container: Elemen utama yang menampung semua kode.
• code-area: Elemen untuk setiap bahasa (HTML, CSS, JavaScript).
• code-header: Berisi judul bahasa dan tombol salin kode.
• code-content: Elemen <pre> untuk menampilkan kode dalam format teks.

2. Styling CSS

.container {
  display: flex;
  justify-content: space-between;
}

.code-area {
  width: 30%;
  margin-bottom: 20px;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}

.language {
  font-weight: bold;
}

.code-content {
  padding: 10px;
  background-color: #e0e0e0;
  font-family: monospace;
  white-space: pre-wrap;
  overflow-y: auto;
}

CSS ini menata layout viewer dengan menggunakan flexbox, menambahkan warna latar belakang, dan mengatur tampilan kode dengan font monospace dan scrolling vertikal.

3. Script JavaScript

const htmlCode = `


  
Hello World

`;

const cssCode = `body {
  background-color: #f0f0f0;
}

h1 {
  color: blue;
}`;

const jsCode = `console.log("Hello, JavaScript!");`;

const htmlCodeArea = document.querySelector('.code-area:first-child .code-content');
const cssCodeArea = document.querySelector('.code-area:nth-child(2) .code-content');
const jsCodeArea = document.querySelector('.code-area:last-child .code-content');

htmlCodeArea.textContent = htmlCode;
cssCodeArea.textContent = cssCode;
jsCodeArea.textContent = jsCode;

const copyButtons = document.querySelectorAll('.copy-button');

copyButtons.forEach(button => {
  button.addEventListener('click', () => {
    const codeArea = button.parentElement.nextElementSibling;
    navigator.clipboard.writeText(codeArea.textContent).then(() => {
      button.textContent = 'Disalin!';
      setTimeout(() => {
        button.textContent = 'Salin Kode';
      }, 1000);
    });
  });
});

JavaScript ini mengambil kode HTML, CSS, dan JavaScript dari string, kemudian menampilkannya dalam elemen <pre> dan menambahkan fungsi salin kode ke tombol.

4. Penjelasan

Struktur HTML:

• Setiap kode ditampilkan dalam elemen <div class="code-area"> yang terpisah.
• Elemen <pre class="code-content"> menampilkan kode dengan format teks yang benar, menjaga indentasi dan baris baru.

Styling CSS:

• Flexbox digunakan untuk mengatur layout viewer agar kode ditampilkan secara berdampingan.
• Font monospace digunakan untuk tampilan kode yang seragam.
• white-space: pre-wrap memungkinkan baris kode untuk dibungkus jika melebihi lebar area tampilan.
• overflow-y: auto menambahkan scroll vertikal pada area kode jika kontennya terlalu panjang.

Script JavaScript:

• Kode HTML, CSS, dan JavaScript disimpan dalam string.
• Kode diambil dari string dan ditampilkan di dalam elemen <pre> yang sesuai.
• Fungsi navigator.clipboard.writeText() digunakan untuk menyalin kode ke clipboard pengguna.

Catatan:

• Anda dapat menyesuaikan CSS dan JavaScript untuk mengubah tampilan dan fungsionalitas viewer sesuai kebutuhan.
• Anda juga dapat menggunakan library seperti highlight.js untuk melakukan highlighting syntax pada kode untuk meningkatkan keterbacaan.
• Anda dapat menambahkan fitur lain seperti penomoran baris, pencarian, dan penyuntingan kode.

Dengan menggunakan struktur HTML, styling CSS, dan script JavaScript ini, Anda dapat dengan mudah membangun viewer untuk HTML, CSS, dan JavaScript yang sederhana namun fungsional.