Cara Membuat Syntax Highlighter di Blog - KodeRian

If you frequently share code in your Blogger posts, a clean and readable code block is essential. In this guide, you’ll learn how to add a pure CSS syntax highlighter style to your Blogger theme—no JavaScript libraries, no bulky plugins, and no performance penalty. We’ll start from a minimal base (using the classic <pre><code> pattern), then expand it with practical enhancements: a subtle color theme, a scrollable container for long snippets, optional line numbers, language badges, accessibility tweaks, and SEO-friendly best practices.

This tutorial is written in clear, natural English and focuses on real-world usage for Blogger users. If you’re aiming for a crisp developer blog, a niche tutorial site, or you just want your snippets to look great, this CSS-only code styling achieves that with minimal overhead.

What you’ll get by the end:

• A reusable CSS block for beautiful <pre><code> code styling in Blogger.
• Optional line numbers (pure CSS approach).
• Optional “language” label badges without JavaScript.
• Reader-friendly scrolling for long snippets, with consistent spacing and legibility.

---

Why Use a Pure CSS Syntax Highlighter?

Most “syntax highlighter” solutions rely on JavaScript libraries (Prism, Highlight.js, etc.). They’re powerful, but they add extra requests and JavaScript execution time. If you prefer a leaner setup or you post moderate amounts of code, a CSS-only styling layer is often enough.

• Lightweight & fast: No scripts, fewer render-blocking resources, and improved Core Web Vitals.
• SEO-friendly: Cleaner pages can boost performance metrics that search engines value.
• Easy maintenance: One place (your theme’s CSS) to style all code blocks across the blog.
• Consistent look: Keep your snippets readable with the same palette, spacing, and typography.

---

How It Works in Blogger

Blogger supports custom CSS in your theme. We’ll target your post content and style:

• .post-body pre – the container for code blocks.
• .post-body pre code – the actual code text.

You’ll paste CSS into your theme and then use <pre><code>...</code></pre> in the post editor’s HTML view whenever you add code.

---

Step-by-Step Tutorial

Step 1 — Open the Blogger Theme Editor

1. Go to Blogger > Theme.
2. Click Edit HTML.

Step 2 — Paste the Base CSS (Dark Theme)

Insert the CSS below right inside your theme’s <style> or <b:skin> section. This gives you a modern, dark-themed look with a subtle left border, comfortable spacing, and a scrollable area for long code.

/* === Base code block styling (Dark) === */
.post-body pre {
  background-color: #292E34;               /* background color */
  border-left: 5px solid #008c5f;          /* left accent */
  margin: .75em 0;
  padding: 0;
  white-space: pre;
  word-wrap: break-word;
  overflow: auto;                          /* allow scrolling if long */
  position: relative;
  width: 100%;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  word-break: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.post-body pre code {
  color: #BFBF90;                          /* text color */
  font-size: 12px;                         /* font size */
  line-height: 1.6;
  display: block;
  background: none;
  border: none;
  padding: 12px 16px;
  max-height: 320px;                       /* constrain tall snippets */
  overflow: auto;                          /* inner scroll */
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  user-select: text;
}

/* Optional: softer rounded corners & shadow */
.post-body pre {
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* Optional: show a subtle gradient edge hint when scrollable */
.post-body pre code {
  background-image:
    linear-gradient(to bottom, rgba(41,46,52,1), rgba(41,46,52,0)),
    linear-gradient(to top, rgba(41,46,52,1), rgba(41,46,52,0));
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px;
  background-position: top, bottom;
}

/* High-contrast focus for accessibility */
.post-body pre:focus-within {
  outline: 2px solid #00b37a;
  outline-offset: 2px;
}

Why this CSS? It keeps your code blocks elegant and readable. The left border guides the eye down the content, while scrollable overflow prevents long snippets from stretching your post forever.

Step 3 — (Optional) Add a Light Theme Variant

If your site uses a light background, use this palette instead:

/* === Optional Light Theme Variant === */
body.light .post-body pre {
  background-color: #f7f7f9;
  border-left-color: #2b7a78;
}

body.light .post-body pre code {
  color: #2D2D2D;
  background-image:
    linear-gradient(to bottom, rgba(247,247,249,1), rgba(247,247,249,0)),
    linear-gradient(to top, rgba(247,247,249,1), rgba(247,247,249,0));
}

Switching themes? Toggle a class like body.light on your layout or template section.

Step 4 — (Optional) Add a “Language” Badge (CSS Only)

You can display a small label (e.g., “HTML”, “CSS”, “JS”) by using a data attribute on <pre> and injecting a badge via CSS. No JavaScript required.

/* === Language badge === */
.post-body pre[data-lang]:before {
  content: attr(data-lang);
  position: absolute;
  top: 6px;
  right: 10px;
  font: 600 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #0f172a;
  background: #e2f7f1;
  border: 1px solid #b7ece0;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .03em;
}

Usage in your post HTML:

<pre data-lang="CSS"><code>/* your CSS here */</code></pre>

Step 5 — (Optional) CSS-Only Line Numbers

True line numbering usually benefits from JS to auto-wrap each line. But there’s a pure CSS workaround: a left “gutter” visually simulating line numbers via counter-increment. You’ll need to wrap each line in a <span>. This is optional but looks great for tutorials.

/* === Line numbers (CSS-only) === */
.post-body pre.ln code {
  counter-reset: line;
  padding-left: 3.25em; /* space for numbers */
}

/* Every line is a span on its own line */
.post-body pre.ln code span {
  display: block;
  counter-increment: line;
}

/* The number itself */
.post-body pre.ln code span::before {
  content: counter(line);
  position: absolute;
  left: 12px;
  color: #8aa39b;
  width: 2em;
  text-align: right;
  opacity: .8;
}

Usage example:

<pre class="ln" data-lang="HTML"><code>
  <span>&lt;div class="card"&gt;</span>
  <span>  &lt;h2&gt;Title&lt;/h2&gt;</span>
  <span>  &lt;p&gt;Hello world!&lt;/p&gt;</span>
  <span>&lt;/div&gt;</span>
</code></pre>

Tip: In Blogger’s HTML editor, paste your code then wrap each line with <span>. It takes a moment, but the visual payoff is worth it for flagship tutorials.

---

Writing Posts: How to Insert Code Blocks

Use the HTML Tab

When you create a new post, switch to the HTML tab and wrap your snippet like this:

<pre data-lang="CSS"><code>
/* Paste your code here without leading &lt;pre&gt;&lt;code&gt; wrappers */
.selector {
  color: #fff;
  background: #008c5f;
  padding: .5rem 1rem;
}
</code></pre>

For long snippets, the container will become scrollable so your post length stays tidy.

---

SEO & Accessibility Tips for Code Posts

• Use descriptive headings: Frame your snippet with <h2>/<h3> labels so readers (and search engines) understand the context.
• Intro + explanation: Don’t just drop code. Explain what it solves, how to use it, and potential pitfalls.
• Contrast & font size: Ensure text is readable on mobile. We use 12px monospace with 1.6 line-height, which is comfortable for most readers.
• Keyboard users: Our :focus-within outline helps keyboard navigation identify the active block.

---

Complete Copy-Paste Starter (Dark)

If you want a single block to paste, here’s a compact version (combining the essentials from above):

/* Paste inside <style> or <b:skin> */
.post-body pre{
  background:#292E34;border-left:5px solid #008c5f;border-radius:8px;
  margin:.75em 0;overflow:auto;position:relative;width:100%;
  white-space:pre;word-wrap:break-word;box-shadow:0 6px 16px rgba(0,0,0,.15);
  -moz-tab-size:2;-o-tab-size:2;tab-size:2;hyphens:none
}
.post-body pre code{
  color:#BFBF90;display:block;font-size:12px;line-height:1.6;max-height:320px;
  padding:12px 16px;background:none;border:none;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background-image:linear-gradient(to bottom,rgba(41,46,52,1),rgba(41,46,52,0)),
                   linear-gradient(to top,rgba(41,46,52,1),rgba(41,46,52,0));
  background-repeat:no-repeat;background-size:100% 24px,100% 24px;background-position:top,bottom
}
.post-body pre:focus-within{outline:2px solid #00b37a;outline-offset:2px}
/* Language badge */
.post-body pre[data-lang]:before{
  content:attr(data-lang);position:absolute;top:6px;right:10px;
  font:600 10px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#0f172a;background:#e2f7f1;border:1px solid #b7ece0;
  padding:4px 8px;border-radius:999px;letter-spacing:.03em
}
/* Optional line numbers */
.post-body pre.ln code{counter-reset:line;padding-left:3.25em}
.post-body pre.ln code span{display:block;counter-increment:line}
.post-body pre.ln code span::before{
  content:counter(line);position:absolute;left:12px;width:2em;text-align:right;color:#8aa39b;opacity:.8
}

---

FAQ

1) Is this a real “syntax highlighter” if it’s only CSS?

Technically, it’s a syntax styling approach. Without JavaScript, we don’t parse tokens (keywords, strings, comments) to color them differently. Instead, we provide a professional, readable theme for code blocks that looks like a highlighter and works everywhere—with minimal overhead. If you want token-based highlighting, you can later add a lightweight JS library. Start with this CSS and upgrade when needed.

2) Can I add a “Copy” button?

Copy-to-clipboard requires JavaScript to access the clipboard reliably. If you insist on pure CSS, the closest “copy” is to encourage users to double-click inside the block to select a line or drag to select all. For a real copy button, add a tiny JS snippet—keep it deferred so it doesn’t block rendering.

3) Will this slow down my site?

No. It’s only CSS. On very long pages with dozens of huge snippets, any approach can feel heavy, but this is far lighter than full JS highlighters. Keep snippets concise or use the max-height and scrolling we’ve provided.

4) How do I keep long lines from breaking layout?

We use overflow: auto and a fixed max-height. Readers can horizontally scroll if necessary. You can also add word-break: break-all, but that may harm readability for code.

5) Can I use different colors per language?

You can, by applying language-specific attributes or classes (e.g., <pre data-lang="CSS">) and writing small CSS overrides for those selectors (e.g., change the left border color or the text color).

---

Troubleshooting

• Code looks the same as normal text: Ensure you’re using <pre><code> and that your CSS is inside <style> or <b:skin> in the theme, not just in a post.
• Badge not visible: Add the data-lang attribute on <pre>. Example: <pre data-lang="JS">.
• Line numbers misaligned: Confirm each line is wrapped with a <span> and that .ln is on the <pre> element.
• Text too small on mobile: Bump font-size to 13–14px or increase line-height.
• Scrollbars look ugly: Consider adding a custom CSS scrollbar style (see the related article link above) that matches your theme.

---

Conclusion

You don’t need heavyweight libraries to present code beautifully on Blogger. With this pure CSS syntax highlighter pattern, you get speed, consistency, and a professional look that’s easy to maintain. Start with the base style, then add optional language badges and CSS-only line numbers for premium tutorials. If your blog grows into a developer hub, you can always layer in token-based highlighters later.

For more front-end polish, pair this guide with other UI tweaks, such as a custom scrollbar or improved navigation. Internal links help readers discover your best content and keep them engaged.

---

Enjoyed this tutorial?

If this helped you, please bookmark it for later, share it with your friends or community, and subscribe to get fresh Blogger customization tips. Happy coding and happy blogging!