Untuk meningkatkan tampilan kode di situs WordPress Anda, Prism.js bisa menjadi pilihan yang bagus. Berikut adalah langkah-langkah untuk mengintegrasikan Prism.js ke dalam WordPress Anda dan beberapa contoh penggunaannya.
Integrasi Prism.js melalui File Lokal
Tambahkan potongan kode ini ke dalam file functions.php di tema WordPress Anda:
function tambahkan_prismjs() { // Daftarkan stylesheet Prism.js wp_enqueue_style('prism-css', get_stylesheet_directory_uri() . '/assets/css/prism.min.css'); // Daftarkan script Prism.js wp_enqueue_script('prism-js', get_stylesheet_directory_uri() . '/assets/js/prism.min.js', array(), false, true); } add_action('wp_enqueue_scripts', 'tambahkan_prismjs');Pastikan untuk menempatkan file prism.min.css dan prism.min.js di direktori assets/css/ dan assets/js/ di tema WordPress Anda.
Contoh Penggunaan Penyorotan Kode
Mari kita lihat beberapa contoh sederhana penggunaan penyorotan kode dengan Prism.js dalam konten WordPress Anda untuk berbagai bahasa pemrograman:
Contoh Kode JavaScript
<pre><code class="language-javascript"> function greeting() { console.log('Hello, World!'); } greeting(); </code></pre>Contoh Kode Python
<pre><code class="language-python"> def greet(name): return 'Hello, ' + name + '!' print(greet('Alice')) </code></pre> Contoh Kode HTML
<pre><code class="language-html"> <!DOCTYPE html> <html> <head> <title>Contoh</title> </head> <body> <h1>Ini adalah contoh</h1> </body> </html> </code></pre> Pastikan untuk menyesuaikan kelas CSS class="language-" sesuai dengan bahasa pemrograman yang Anda gunakan.
Dengan langkah-langkah ini, Anda dapat meningkatkan tampilan kode di situs WordPress menggunakan Prism.js. Selamat mencoba!
