Testing HTML Markup, Code Highlighting, dan Block Styles

Mas Sugeng
Mas Sugeng
(Diperbarui: 03/27/2026)•Tutorial•4 menit baca

Postingan ini mendemonstrasikan berbagai markup HTML standar, syntax highlighting untuk kode, dan berbagai block styles WordPress.

Code Syntax Highlighting

Tema ini mendukung syntax highlighting dengan Prism.js untuk berbagai bahasa pemrograman. Aktifkan fitur ini di Customizer → Single Post → Enable Code Highlighting.

Gunakan komentar // lang: <nama bahasa coding> di atas kode untuk otomatis mendeteksi bahasa coding.

HTML

// lang: html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a basic HTML example.</p>

  <a href="https://example.com">Visit Example</a>
</body>
</html>

CSS

// lang: css
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
  text-align: center;
}

p {
  color: #333;
  font-size: 18px;
}

button {
  background-color: green;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

JavaScript

// lang: javascript
// Show a message in console
console.log("Hello, JavaScript!");

// Variables
let name = "Sugeng";

// Function
function greet(user) {
  return "Hello, " + user + "!";
}

console.log(greet(name));

Python

# lang: python
a = 5
b = 3

result = a + b
print(result)

PHP

// lang: php
<?php
$number1 = 5;
$number2 = 3;

$result = $number1 + $number2;
echo $result;
?>

Bash / Shell

# lang: bash
#!/bin/bash

echo "Starting script..."
echo "Done!"

JSON

// lang: json
{
  "name": "Sample",
  "age": 25,
  "isActive": true
}

WordPress Block Styles

Tema SastraPro menyediakan beberapa custom block styles untuk mempercantik tampilan konten Anda.

Button Styles

Default Button:

Default Button
Another Button

Outline Button Style:

Outline Button
Learn More

Quote Styles

Default Quote:

Kesederhanaan adalah kecanggihan tertinggi. Desain yang baik adalah desain yang tidak terlihat.

Leonardo da Vinci

Border Accent Quote Style:

Kode yang baik adalah dokumentasi terbaik. Saat kamu hendak menambahkan komentar, tanyakan pada dirimu: “Bagaimana cara memperbaiki kode ini agar komentar tidak diperlukan?”

Steve McConnell

List Styles

Default Unordered List:

  • Responsive design untuk semua perangkat
  • Dark mode dengan toggle otomatis
  • SEO-friendly dengan schema markup
  • Performa optimal dengan lazy loading

Default Ordered List:

  1. Install tema melalui WordPress admin
  2. Aktifkan tema di Appearance → Themes
  3. Konfigurasi pengaturan di Customizer
  4. Mulai membuat konten!

No Bullets List Style:

  • ✅ Fitur lengkap tanpa plugin tambahan
  • ✅ Update gratis seumur hidup
  • ✅ Dokumentasi lengkap
  • ✅ Support prioritas

Group Card Style

Informasi Penting

Ini adalah contoh Group block dengan style “Card”. Sangat berguna untuk menampilkan informasi yang perlu ditonjolkan atau membuat callout box.

Anda dapat memasukkan berbagai jenis konten di dalam card ini, termasuk list, gambar, dan block lainnya.

Table Block

FiturFree ThemeSastraPro
Dark Mode❌✅
Code Highlighting❌✅
Table of Contents❌✅
Related PostsBasicAdvanced
SEO FeaturesBasicComplete
Auto Updates❌✅

HTML Typography & Markup

Headings

Heading 1 – Judul Utama

Heading 2 – Sub Judul

Heading 3 – Bagian

Heading 4 – Sub Bagian

Heading 5 – Detail
Heading 6 – Micro Heading

Text Formatting

Ini adalah paragraf standar dengan berbagai format teks. Anda dapat menggunakan teks tebal untuk penekanan kuat, teks miring untuk penekanan ringan, atau kombinasi tebal dan miring.

Untuk kode inline, gunakan format seperti ini. Sangat berguna untuk menyebutkan nama fungsi seperti get_template_part() atau variabel $post_id.

Anda juga dapat menambahkan link seperti ini atau highlight teks penting untuk menarik perhatian pembaca.

Untuk konten yang dihapus gunakan strikethrough seperti ini, dan untuk subscript/superscript: H2O atau E=mc2.

Preformatted Text

Ini adalah preformatted text.
Spasi dan line breaks
    dipertahankan persis
        seperti yang ditulis.

Berguna untuk ASCII art atau teks terstruktur.

Pullquote

Pullquote digunakan untuk menyoroti kutipan penting dari artikel. Biasanya ditampilkan lebih besar dan menonjol dari teks biasa.

Penulis Terkenal

Details/Accordion

Klik untuk melihat lebih banyak informasi

Ini adalah konten tersembunyi yang akan muncul ketika pengguna mengklik summary. Sangat berguna untuk FAQ atau konten yang tidak perlu ditampilkan secara langsung.

Bagaimana cara menggunakan tema ini?

Upload tema melalui WordPress admin di Appearance → Themes → Add New → Upload Theme. Setelah diupload, aktifkan tema dan konfigurasi melalui Customizer.

Apakah tema ini kompatibel dengan plugin populer?

Ya! Tema ini kompatibel dengan WooCommerce, Contact Form 7, Yoast SEO, dan plugin populer lainnya. Kami menguji kompatibilitas secara berkala.

Footnotes

WordPress mendukung footnotes untuk referensi akademis atau penjelasan tambahan. Fitur ini berguna untuk artikel yang membutuhkan sitasi atau catatan kaki.

Media Blocks

Image dengan Caption

Contoh gambar coding
Contoh gambar dengan caption. Foto dari Unsplash.
Gambar 1
Gambar 2
Gambar 3

Video Embed

Contoh embed video YouTube

Columns Layout

Kolom Pertama

Konten kolom pertama. WordPress Columns block memudahkan pembuatan layout multi-kolom tanpa perlu kode CSS khusus.

Kolom Kedua

Konten kolom kedua. Layout ini responsif dan akan menyesuaikan secara otomatis pada layar mobile.

Kolom Ketiga

Konten kolom ketiga. Anda dapat mengubah proporsi kolom sesuai kebutuhan desain.

Mas Sugeng

Pembuat tema blogger dan tema wordpress Indonesia.

Artikel lainnya oleh Mas Sugeng