DesignTutorialWordPress

Mempercantik Penampilan Kode di WordPress dengan Prism.js

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!

Eliyanto Sarage

Dibalik setiap proyek terdapat cerita unik, dari konsep awal hingga hasil akhir yang menakjubkan, mencerminkan perjalanan kreatif yang penuh tantangan.

Artikel Terkait

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Back to top button