Skip to content

emka.web.id

menulis pengetahuan – merekam peradaban

Menu
  • Home
  • Tutorial
  • Search
Menu

Cara Menggunakan Blok Kode di WordPress

Posted on December 6, 2022

WordPress adalah Sistem Manajemen Konten tangguh yang menggerakkan lebih dari separuh situs web di internet. CRM bawaan memudahkan seseorang untuk membuat situs web meskipun Anda belum pernah menulis program komputer sebelumnya. Meskipun sangat mudah untuk menampilkan blok teks normal di situs web WordPress, hal yang sama tidak berlaku untuk kode komputer. Sepotong kode harus ditampilkan secara memadai agar pemirsa dapat menganalisis dan memahaminya. Dan di situlah blok kode WordPress berperan. 

Jika Anda ingin tahu cara menggunakan blok kode di WordPress, Anda datang ke tempat yang tepat. Dalam artikel ini, kami akan memandu Anda melalui keseluruhan proses sehingga Anda dapat mulai berbagi potongan kode dengan pembaca Anda. Lanjutkan membaca untuk mengetahui lebih lanjut.

Cara Menggunakan Blok Kode di WordPress

Menampilkan program komputer sebagai teks halaman web biasa bisa menjadi bencana. Banyak pengguna akan merasa sulit untuk memvisualisasikan dan memahami. Untungnya, banyak editor WordPress memiliki fitur blok kode yang memungkinkan Anda menampilkan program komputer dalam format kode.

Untungnya, menggunakan blok kode untuk menampilkan kode komputer relatif mudah. Untuk memulai, Anda harus beralih ke editor WordPress asli karena beberapa plugin teks mungkin tidak memiliki fitur tersebut. Setelah Anda melakukannya, ikuti langkah-langkah ini untuk menambahkan blok kode pada halaman situs web:
Buka halaman web yang ingin Anda tambahkan blok kode dengan mengklik tombol “Baru”. Ketik “/ kode” dan tekan “Enter. Ketik atau rekatkan kode yang ingin Anda tampilkan dan tekan tombol “Enter”. Anda selanjutnya dapat menggunakan bilah alat blok kode untuk menyesuaikan tampilan kode yang baru saja Anda tulis. Misalnya, Anda dapat menggunakan tombol “B” untuk membuat garis tebal atau tombol “i” untuk mencetak miring. Setelah Anda selesai membuat halaman web, klik tombol “Pratinjau” untuk melihat tampilan blok kode pada versi langsung. Jika puas dengan hasil akhir, tekan tombol “Perbarui” agar orang lain dapat melihat blok kode juga.
Cara Mengubah Tipografi Blok Kode Anda

Tipografi berbicara banyak dan dapat membuat atau menghancurkan estetika tidak hanya blok kode Anda tetapi juga seluruh halaman web. Untuk mengubah tipografi blok kode Anda, ikuti langkah-langkah berikut:
Sorot blok kode yang tipografinya ingin Anda ubah. Klik ikon “Pengaturan” di pojok kanan atas layar. Di bawah bagian “Tipografi”, tentukan tipografi pilihan Anda .Klik tombol “Perbarui” untuk menyimpan perubahan.
Anda dapat menyesuaikan lebih lanjut estetika blok dengan mengubah warna, latar belakang, spasi huruf, spasi baris.

Misalnya, jika Anda memiliki situs web bertema gelap, Anda mungkin juga ingin blok kode Anda memiliki latar belakang yang berbeda.

Cara Menghapus Blok Kode di WordPress

Blok kode tidak permanen dan sama seperti elemen lain dari halaman web WordPress, Anda dapat menghapusnya. Berikut cara prosesnya:
Buka halaman web atau pos yang memiliki blok kode yang ingin Anda hapus.Klik blok kode yang ingin Anda hapus untuk menyorotnya.Pada widget yang muncul tepat di bagian atas kode blokir, klik pada tiga titik. Dari opsi, pilih “Hapus Kode.”
Tindakan di atas harus menghapus seluruh blok kode dari halaman web. Alternatifnya, Anda cukup memilih blok dan menekan tombol “Hapus”. Anda juga dapat menekan tombol “Ctrl” + “Shift” + “Z” secara bersamaan dan hasilnya akan sama. Anda mungkin juga menemukan cara yang lebih baik untuk mengeksekusi ide melalui kode. WordPress memungkinkan Anda untuk mengedit blok kode yang sudah ada dengan mengikuti petunjuk di bawah ini:
Buka halaman yang memiliki blok kode yang ingin Anda edit.Klik “Edit.”Klik blok kode untuk mengaktifkan pengeditan kode.Setelah Anda selesai membuat perubahan, klik tombol “Perbarui”.
Cara Menambahkan Blok Kode ke Situs WordPress Anda Menggunakan Plugin

Jika Anda sering menambahkan potongan kode ke situs web Anda, mungkin lebih baik mendapatkan plugin yang lebih kuat untuk membantu Anda. Salah satu blok kode populer yang kuat dan luar biasa adalah plugin SyntaxHighlighter Evolved .

Plugin ini memiliki keunggulan dibandingkan Editor WordPress asli karena:
Ini menyoroti jumlah baris dalam cuplikan kodeMendukung beberapa bahasa pemrogramanIni memungkinkan pemirsa Anda untuk menyalin dan menempelkan code
yang ditampilkanBerikut cara menggunakan plugin untuk mengelola cuplikan kode di situs web Anda dengan lebih baik:
Instal dan aktifkan plugin SyntaxHighlighter Evolved .Buka halaman atau posting jika Anda ingin menambahkan blok kode.Aktifkan pengeditan dan klik tombol plus.Cari “SyntaxHighLighter Evolved” dan buka hasil pertama yang muncul.Tempel atau tulis kode di blok kode yang tersedia.Klik ikon setelan di pojok kanan atas layar dan arahkan ke tab “Blokir”.Tentukan bagaimana Anda ingin penomoran muncul dan baris kode mana yang ingin disorot.Anda juga dapat aktifkan “Buat URL dapat diklik” jika Anda ingin membuat kode Anda dapat diklik.
Untuk mengubah warna dan skema pemformatan blok kode Anda, ikuti langkah-langkah ini:
Buka “Pengaturan” dan navigasi t o bagian “Penyorot Sintaks”.Ubah tema blok Anda.Tekan “Simpan” “Pratinjau” untuk melihat bagaimana perubahan akan terlihat dalam mode langsung.
FAQ tambahan
Bagaimana Anda membuat blok kode menjadi tautan yang dapat diklik?

Untuk membuat blok kode tautan menggunakan editor WordPress, ikuti langkah-langkah berikut:

1. Pilih baris kode yang ingin Anda jadikan link.

2. Dari widget pop-up, pilih ikon tautan. Alternatifnya, Anda dapat menekan tombol “Ctrl” + “K” pada keyboard Anda.

3. Masukkan URL yang Anda inginkan untuk ditautkan dengan kode dan tekan tombol “Enter”. Bisakah saya menyorot kode menggunakan editor blok kode yang disediakan oleh editor WordPress?

Tidak, blok kode yang disediakan oleh editor WordPress asli tidak mengizinkan pengguna untuk salin dan tempel kode. Untuk melakukannya, Anda memerlukan bantuan plugin pengeditan blok kode tingkat lanjut seperti plugin “SyntaxHighligher Evolved”. Apakah Elementor memiliki fitur blok kode? Sayangnya, jika Anda menggunakan plugin untuk membuat situs web, Anda tidak akan menemukan blok yang memungkinkan Anda memformat program komputer di situs web Anda. Oleh karena itu, Anda harus beralih ke editor WordPress konvensional untuk menyelesaikan tugas. Blok kode akan memberi pembaca Anda waktu yang mudah dan secara keseluruhan meningkatkan pengalaman pengguna situs web Anda. Dan seperti yang Anda lihat, memasukkan blok kode adalah proses yang relatif mudah, terutama dengan editor bawaan WordPress.

Sudahkah Anda mencoba menggunakan blok kode yang disediakan WordPress? Bagaimana dengan plugin SyntaxHighlighter Evolved? Silakan berbagi dengan kami pengalaman Anda di bagian komentar di bawah.

Terbaru

  • Inilah Alasan Kenapa Hasil TKA Jadi Kunci Penting di Jalur Prestasi SPMB 2026, Orang Tua Wajib Tahu!
  • Inilah Alasan Kenapa Situs Bumiayu Dianggap Lebih Tua dari Sangiran dan Jadi Kunci Sejarah Jawa
  • Inilah Cara Cerdik Larva Kumbang Hitam Eropa Meniru Aroma Bunga untuk Menipu Lebah
  • Inilah 45 Planet Berbatu yang Paling Berpotensi Jadi Rumah Kedua Manusia di Masa Depan
  • Inilah Cara Ambil Kursus Online Gratis dari Harvard University untuk Asah Skill Digital Kalian!
  • Inilah Rincian UKT UGM 2026 Jalur SNBP dan SNBT, Calon Mahasiswa Wajib Tahu!
  • Inilah Daftar 25 Universitas Terbaik di Inggris 2026 Versi The Guardian yang Wajib Kalian Lirik!
  • Inilah Alasan University of Oxford Masih Jadi Juara Dunia di QS Rankings 2026, Empat Jurusan Ini Nggak Ada Lawannya!
  • Inilah 17 Rahasia Tips Sukses dari Produk Digital, Yuk Simak!
  • Inilah Peluang Lolos SNBT Unair 2026, Cek Keketatan Jurusan Pilihanmu Sekarang!
  • Hapus PR! China Baru Saja Rombak Aturan Sekolah, Inilah Caranya Mereka Ngurangin Beban Stres Siswa
  • Inilah Daftar Negara Paling Sopan di Dunia, Ternyata Jepang Juaranya Bukan Eropa!
  • Inilah Alasan Kenapa Ada Gurun yang Letaknya Malah di Pinggir Laut, Kok Bisa?
  • Inilah Cara Mengajukan bluExtraCash BCA Digital, Pinjaman Online Tanpa Agunan yang Bisa Cair Kilat Sampai 50 Juta
  • Inilah Cara Mengisi Berita Acara Pengecekan Penyimpanan Eksternal Bantuan Pemerintah Lewat CrystalDiskInfo, Gampang Banget!
  • Belum Tahu? Inilah Cara Pasang FF Kipas Org OB52 Apk Biar Nggak Mentok Logo dan Bisa Jadi Sultan!
  • Belum Tahu? Inilah FF Kipas Custom Free 32 Bit APK, Solusi Lag atau Malah Bikin Masalah?
  • Inilah Daftar Kode Redeem Blox Fruits Terbaru dan Cara Pakainya Biar Cepat Level Max!
  • Ini Trik Supaya YouTube Shorts Kalian Ranking 1 di Pencarian
  • Inilah Daftar Kode Redeem Fish It Roblox Terbaru April 2026 dan Cara Klaimnya Biar Mancing Makin Gacor!
  • Inilah Cara Tarik Saldo Cool Lady, Game Penghasil Uang yang Lagi Viral dan Terbukti Membayar!
  • Inilah Kode Redeem Drag Drive Simulator April 2026, Simak Trik Rahasia Biar Menang Balapan Terus!
  • Inilah Little Finder Guy, Strategi Unik Apple yang Bikin MacBook Neo Jadi Viral di Media Sosial
  • Inilah Yang Baru di Minecraft Java Edition 26.1.1, Perubahan Mob Bayi Jadi Lebih Realistis dan Fitur Baru yang Bikin Gameplay Makin Seru!
  • Inilah Cara Bayar UKT UIN Sunan Kalijaga 2026 Lewat Kode Bayar Biar Nggak Bingung Lagi!
  • Inilah Syarat Penting Surat Keterangan Kelas 12 UTBK 2026 dan Contohnya
  • Belum Tahu? Inilah Cara Bayar UTBK SNBT 2026 Online Biar Nggak Ketinggalan Jadwal!
  • Inilah Kebenaran Kasus Bayu, Siswa yang Viral Katanya Dilengserkan dari Ketua OSIS Gegara Kritik Makan Bergizi Gratis
  • Inilah 4 Cara Jitu Jualan Produk Digital Pakai Google, Dijamin Cuan Terus!
  • Inilah Sinopsis dan Jadwal Tayang Drakor Perfect Crown, Kisah Pernikahan Kontrak IU dan Byun Woo-seok yang Menarik untuk Disimak!
  • Is it Time to Replace Nano? Discover Fresh, the Terminal Text Editor You Actually Want to Use
  • How to Design a Services Like Google Ads
  • How to Fix 0x800ccc0b Outlook Error: Step-by-Step Guide for Beginners
  • How to Fix NVIDIA App Error on Windows 11: Simple Guide
  • How to Fix Excel Formula Errors: Quick Fixes for #NAME
  • How to Master NemoClaw and OpenShell for a Protected Virtual Assistant Experience
  • How to Create Realistic AI Influencer Video with LTXVideo and ComfyUI (Workflows + Tools)
  • How to Master Google Flow and Create Stunning AI Videos Like a Pro!
  • How to Make Your Study Material with Google’s NotebookLM: New AI Quizzes and Flashcards Explained
  • How to Solving OpenClaw Memory Issues with MemPalace!
  • Apa itu Spear-Phishing via npm? Ini Pengertian dan Cara Kerjanya yang Makin Licin
  • Apa Itu Predator Spyware? Ini Pengertian dan Kontroversi Penghapusan Sanksinya
  • Mengenal Apa itu TONESHELL: Backdoor Berbahaya dari Kelompok Mustang Panda
  • Siapa itu Kelompok Hacker Silver Fox?
  • Apa itu CVE-2025-52691 SmarterMail? Celah Keamanan Paling Berbahaya Tahun 2025

©2026 emka.web.id | Design: Newspaperly WordPress Theme