Features

Code Highlighting Features Demo

Code Highlighting Features This post demonstrates all code block features available in the blog theme. Basic Syntax High

Demo Author · · 1 min read ·
democode

Code Highlighting Features

This post demonstrates all code block features available in the blog theme.

Basic Syntax Highlighting

const greeting = 'Hello, Sveltepress!'
console.log(greeting)
ts

Code Block with Title

vite.config.ts
import { sveltepress } from '@sveltepress/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [sveltepress()],
})
ts

Line Numbers

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
ts
1
2
3
4
5

Title + Line Numbers

app.ts
import express from 'express'

const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(3000)
ts
1
2
3
4
5
6
7
8
9

Line Highlighting

const normal = 'not highlighted'
const important = 'this line is highlighted' 
const alsoNormal = 'back to normal'
ts

Diff Commands

-
+
const oldValue = 'remove me' 
const newValue = 'add me' 
const unchanged = 'stays the same'
ts

Focus Command

const unfocused1 = 'dim'
const focused = 'bright and clear' 
const unfocused2 = 'dim again'
ts

Multiple Languages

<div class="container">
  <h1>Hello</h1>
  <p>Welcome to Sveltepress</p>
</div>
html
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
css
{
  "name": "my-blog",
  "version": "1.0.0",
  "type": "module"
}
json

Svelte Component

<script lang="ts">
  let count = $state(0)

  function increment() {
    count++
  }
</script>

<button onclick={increment}>
  Count: {count}
</button>
svelte

That covers all the code highlighting features!

Related posts