shikijs / shiki

A beautiful yet powerful syntax highlighter
http://shiki.style/
MIT License
9.91k stars 361 forks source link

shiki-renderer-svg support #681

Closed hhk-png closed 4 months ago

hhk-png commented 4 months ago

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[bot] commented 4 months ago

Deploy Preview for shiki-matsu ready!

Name Link
Latest commit 7a8dcc9fcc3ca926099a3bc954ba1f1a151f2457
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...

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[bot] commented 4 months ago

Deploy Preview for shiki-next ready!

Name Link
Latest commit 7a8dcc9fcc3ca926099a3bc954ba1f1a151f2457
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...

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 commented 4 months ago

The progress failed due to the install of playwright.