shiki-renderer-svg support

[hhk-png]

Description

The shiki-renderer-svg project located at packages/shiki-renderer-svg. The api of it and build tool(rollup) are equal to previous version.

It could use as:

const str = `const show = console.log
//  注释注释
async function fact(n) {
  return n === 0 ? 1 : n * (await fact (n - 1))
}
fact(6).then(show)`

const { tokens } = await codeToTokens(str, {
  lang: 'javascript',
  theme: 'github-light',
})
const { renderToSVG } = await getSVGRenderer()
// svg string
const res = await renderToSVG(tokens)

But the render options are different.

// current options
interface RenderOptions {
  fontFamily?: string
  fontSize?: number
  lineHeightRatio?: number
  backgroundColor?: string
  borderRadius?: number
  selectionbgColor?: string
  selectionColor?: string
  cursor?: string
  opacity?: number
  remoteFontCSSURL?: string
}

// previous options
interface SVGRendererOptions {
  fontFamily: string | RemoteFontFamily
  remoteFontCSSURL?: string
  fontSize?: number
  lineHeightToFontSizeRatio?: number
  bg?: string
  bgCornerRadius?: number
  bgSideCharPadding?: number
  bgVerticalCharPadding?: number
  bgMinWidth?: number
  bgFillOpacity?: number
}

Is there anything else that should to be changed?

Linked Issues

#678

Additional context

[netlify]

✅ Deploy Preview for shiki-matsu ready!

Name	Link
🔨 Latest commit	7a8dcc9
🔍 Latest deploy log	https://app.netlify.com/sites/shiki-matsu/deploys/664b43301ea50c0008a19ef7
😎 Deploy Preview	https://deploy-preview-681--shiki-matsu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for shiki-next ready!

Name	Link
🔨 Latest commit	7a8dcc9
🔍 Latest deploy log	https://app.netlify.com/sites/shiki-next/deploys/664b433094a26200080bda48
😎 Deploy Preview	https://deploy-preview-681--shiki-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hhk-png]

The progress failed due to the install of playwright.