Menampilkan Script Pada Website Menggunakan PrismJS

SugengOleh Sugeng|12/03/2025

Pendahuluan

PrismJS adalah pustaka JavaScript yang ringan untuk menampilkan sintaks script di website. Pustaka ini mendukung berbagai bahasa pemrograman dan sangat mudah digunakan dengan tampilan teks berwarna yang menarik.

Keunggulan PrismJS

  • Ringan: File inti hanya beberapa KB
  • Mendukung Banyak Bahasa Pemrograman: Tersedia berbagai plugin dan bahasa pemrograman tambahan
  • Mudah Dikustomisasi: Tersedia berbagai tema dan fitur tambahan
  • Dukungan Plugin: Memungkinkan fitur seperti copy-to-clipboard dan line-numbering

Cara Instalasi PrismJS

1. Menambahkan PrismJS ke Website Anda, yaitu dengan menambahkan script dibawah ini diantara <head> . . . </head>

<link href="https://masyarakat.id/script/prism.css" rel="stylesheet"/>
<style>
pre code {
  margin: 0;
  padding: 0;
}

.line-numbers .line-numbers-rows {
  border-right: 1px solid #303133;
}

pre[class*="language-"] {
  color: #d1d1d1;
  position: relative;
  overflow: auto;
  border-radius: 5px;
  border-color: 1px solid #303133;
  background-color: transparent;
  font-size: 12px;
}

.language-bash .token.command {
  color: #ffcc00;
  font-weight: bold;
}

.language-bash .token.filename {
  color: #66d9ef;
}

.copy-button {
  background-color: transparent;
  border: 0.5px solid grey;
  color: grey;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  padding: 3px 5px 3px 10px;
  margin: 10px 5px;
}

.copy-button.copied {
  color: #0fff50;
}

.copy-to-clipboard {
  position: relative;
}

.copy-to-clipboard .copy-button {
  position: absolute;
  top: -3px;
  right: 3px;
  z-index: 10px;
}

.copy-button i {
  margin-right: 5px;
}
</style>

2. Tambahkan script dibawah ini diantara <body>. . .</body>

<script src="https://masyarakat.id/script/prism.js"></script>
<script src="https://masyarakat.id/script/copy.js"></script>

2. Jika Anda menggunakan WordPress, silakan tambahkan script CSS dibawah ini di Tampilan -> Sesuaikan -> CSS Tambahan

pre code {
  margin: 0;
  padding: 0;
}

.line-numbers .line-numbers-rows {
  border-right: 1px solid #303133;
}

pre[class*="language-"] {
  color: #d1d1d1;
  position: relative;
  overflow: auto;
  border-radius: 5px;
  border-color: 1px solid #303133;
  background-color: transparent;
  font-size: 12px;
}

.language-bash .token.command {
  color: #ffcc00;
  font-weight: bold;
}

.language-bash .token.filename {
  color: #66d9ef;
}

.copy-button {
  background-color: transparent;
  border: 0.5px solid grey;
  color: grey;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  padding: 3px 5px 3px 10px;
  margin: 10px 5px;
}

.copy-button.copied {
  color: #0fff50;
}

.copy-to-clipboard {
  position: relative;
}

.copy-to-clipboard .copy-button {
  position: absolute;
  top: -3px;
  right: 3px;
  z-index: 10px;
}

.copy-button i {
  margin-right: 5px;
}

2. Cara menggunakan PrismJS

Jika menggunakan HTML:

<pre class="language-html copy-to-clipboard"><code><h1>Hello, World!</h1></code></pre>

Jika menggunakan CSS:

<pre class="language-css copy-to-clipboard"><code>body {
  background-color: #f4f4f4;
}</code></pre>

Jika menggunakan JavaScript:

<pre class="language-js copy-to-clipboard"><code>console.log("Hello, PrismJS");</code></pre>

Jika menggunakan Python:

<pre class="language-python copy-to-clipboard"><code>def hello():
print("Hello, PrismJS")</code></pre>

Jika ingin menggunakan nomor pada script:

<pre class="language-python copy-to-clipboard line-numbers"><code># Handler untuk /start
@bot.message_handler(commands=['start'])
def send_welcome(message):
    markup = types.ReplyKeyboardMarkup(resize_keyboard=True, one_time_keyboard=False)
    markup.add('Daftar Surah', 'Jadwal Salat')
    markup.add('Bantuan Kami', 'Hubungi Kami')
    markup.add('Donasi', 'Hadis')
    bot.send_message(message.chat.id, f'Assalamu Alaikum, {message.from_user.first_name}')
    bot.send_message(message.chat.id, f"Silakan ketik kata yang ingin Anda cari atau gunakan menu Bantuan Kami untuk informasi lebih lanjut.", reply_markup=markup)</code></pre>

Kesimpulan

PrismJS adalah salah satu solusi untuk menampilkan script dengan mudah yang memiliki tampilan menarik di website. Dengan fitur yang tersedia, mendukung banyak bahasa pemrograman, serta kemudahan integrasi, PrismJS sangat direkomendasikan bagi pengembang yang ingin meningkatkan pengalaman menampilkan script di situs mereka.

masyarakat

Bagikan

Baca Juga

Beri komentar

© 2025 Masyarakat. All rights reserved