LTS Highlight Playground

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

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

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

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

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

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

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
  }
}

// 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(): 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
prototypeNumberConstructor.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',
      },
    })
  }
}