LTS Highlight Playground

· 2 min

Rehype Pretty Code

Highlight Lines

import { useFloating } from '@floating-ui/react'
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating()
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  )
}

Group Highlighted Lines By Id

import { useFloating } from '@floating-ui/react'
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating()
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  )
}

Highlight Chars

const [age, setAge] = useState(50)
const [name, setName] = useState('Taylor')

Group Highlighted Chars By Id

const [age, setAge] = useState(50)
const [name, setName] = useState('Taylor')

Highlight Inline Code

The result of [1, 2, 3].join('-') is '1-2-3'.

Highlight Plain Text

The name of the function is getStringLength.

Titles

import_map.json
{
  "imports": {
    "lume/": "https://deno.land/x/lume@v2.0.3/",
    "lume_theme_shiraha/jsx-runtime": "./jsx-runtime.ts"
  }
}

Captions

{
  "imports": {
    "lume/": "https://deno.land/x/lume@v2.0.3/",
    "lume_theme_shiraha/jsx-runtime": "./jsx-runtime.ts"
  }
}
import_map.json

Line Numbers

export const layout = 'layouts/article-list.tsx'
export default function* ({ search, paginate }: Lume.Data) {
  const pages = search.pages('type=article', 'date=desc')
  for (const page of paginate(pages, {
    url: (n) => (n === 1 ? '/' : `/p/${n}/`),
    size: 5,
  })) {
    yield page
  }
}

Shikiji Transformers

Twoslash

Type import doesn’t work in Deno.

// import { rendererRich, transformerTwoslash } from 'shikiji-twoslash'
import { rendererRich, transformerTwoslash } from 'npm:shikiji-twoslash@0.10.1'
 
transformerTwoslash({
  renderer: rendererRich() // <--
})
interface Todo {
  Todo.title: stringtitle: string
}
 
const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonly
Readonly
<Todo> = {
title: string
title
: 'Delete inactive users'.String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.
toUpperCase
(),
} const todo: Readonly<Todo>todo.title = 'Hello'
Cannot assign to 'title' because it is a read-only property.
var Number: NumberConstructor
An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.
Number
.p
  • parseFloat
  • parseInt
  • prototype
NumberConstructor.parseInt(string: string, radix?: number): number
Converts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`. If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal. All other strings are considered decimal.
arseInt
('123', 10)
// //
import { getHighlighterCore } from 'shikiji/core'
 
const highlighter = await getHighlighterCore({})
// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message
const HTML = await Deno.readFile("./index.html")
 
Deno.serve((req: Request) => new Response(HTML, {
  headers: {
    'content-type': 'text/html',
  },
}))
const const FILE_URL: stringFILE_URL = new var URL: new (url: string | URL, base?: string | URL) => URL
The URL interface represents an object providing static methods used for creating object URLs. [MDN Reference](https://developer.mozilla.org/docs/Web/API/URL)
URL
("/movie.webm", import.meta.ImportMeta.url: stringurl).URL.href: string
[MDN Reference](https://developer.mozilla.org/docs/Web/API/URL/href)
href
export default { fetch: (req: Request) => Promise<Response>fetch: async (req: Requestreq: Request) => { const const res: Responseres = await function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>
[MDN Reference](https://developer.mozilla.org/docs/Web/API/fetch)
fetch
(const FILE_URL: stringFILE_URL)
return new var Response: new (body?: BodyInit | null, init?: ResponseInit) => Response
This Fetch API interface represents the response to a request. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Response)
Response
(const res: Responseres.Body.body: ReadableStream<Uint8Array> | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/body)
body
, {
ResponseInit.headers?: HeadersInit | undefinedheaders: { 'content-type': 'video/webm', }, }) } }