LTS Highlight Playground1/26/2024 · 2 minRehype Pretty CodeHighlight Linesimport { 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 Idimport { useFloating } from '@floating-ui/react' function MyComponent() { const { refs, floatingStyles } = useFloating() return ( <> <div ref={refs.setReference} /> <div ref={refs.setFloating} style={floatingStyles} /> </> ) }Highlight Charsconst [age, setAge] = useState(50) const [name, setName] = useState('Taylor')Group Highlighted Chars By Idconst [age, setAge] = useState(50) const [name, setName] = useState('Taylor')Highlight Inline CodeThe result of [1, 2, 3].join('-') is '1-2-3'.Highlight Plain TextThe name of the function is getStringLength.Titlesimport_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.jsonLine Numbersexport 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 TransformersTwoslashType 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 readonlyReadonly<Todo> = { title: stringtitle: 'Delete inactive users'.String.toUpperCase(): stringConverts 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: NumberConstructorAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.pparseFloatparseIntprototypeNumberConstructor.parseInt(string: string, radix?: number): numberConverts 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 messageconst 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) => URLThe 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) => ResponseThis 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', }, }) } }#Lume_Theme_Shiraha#Shikiji#Rehype Pretty Code