シンタックスハイライトのサンプル

この記事では、複数の言語でコードブロックを書いて、highlight.js によるシンタックスハイライトを確認します。

Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, highlight.js!")
                .font(.title)
            Button("Tap me") {
                print("tapped")
            }
        }
        .padding()
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('[data-theme-choice]');
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      console.log(`Theme selected: ${button.dataset.themeChoice}`);
    });
  });
});

YAML

site:
  title: noppe.dev
  url: https://noppe.dev
author:
  name: noppe
  social:
    - github
    - x

Shell

swift run site-builder new sample --title "Sample Article"
make build
make preview