Cara Buat Blok Kode Seperti di ChatGPT

🧩 STEP 1 — HTML blok kode

Tempel di postingan (mode HTML):

function hello() {
  console.log("Halo dunia");
}


  

🎨 STEP 2 — CSS (taruh di Tema → Customize → Advanced → Add CSS)

.code-box{
  position:relative;
  background:#0f172a;
  border-radius:10px;
  margin:20px 0;
  overflow:hidden;
}

.code-box pre{
  margin:0;
  padding:16px;
  overflow:auto;
  color:#e5e7eb;
  font-family:monospace;
  font-size:14px;
}

.copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:#1a73e8;
  color:#fff;
  border:none;
  padding:5px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
}
.copy-btn:hover{
  background:#1557b0;
}
  

⚙️ STEP 3 — JavaScript (WAJIB) Taruh di: 👉 Tema → Edit HTML → sebelum </body>

<script>
document.addEventListener("click", function(e){
  if(e.target.classList.contains("copy-btn")){
    const code = e.target.nextElementSibling.innerText;
    navigator.clipboard.writeText(code);
    e.target.innerText = "Copied!";
    setTimeout(()=> e.target.innerText="Copy",1500);
  }
});
<script>


  

Baca Juga

Related Posts