Test
59 | 60 | 61 | ` 62 | } 63 | 64 | export async function measureMonospaceTypeface( 65 | fontNameStr: string, 66 | fontSize: number, 67 | remoteFontCSSURL?: string 68 | ): Promise<{ width: number; height: number }> { 69 | if (__BROWSER__) { 70 | return measureFont([fontNameStr, fontSize]) 71 | } else { 72 | const playwright = require('playwright') as typeof import('playwright') 73 | const browser = await playwright.chromium.launch({ headless: true }) 74 | 75 | const page = await browser.newPage() 76 | 77 | if (remoteFontCSSURL) { 78 | await page.goto('data:text/html,' + getDocument(fontNameStr, remoteFontCSSURL), { 79 | waitUntil: 'networkidle' 80 | }) 81 | 82 | const measurement = await page.evaluate(measureFont, [fontNameStr, fontSize]) 83 | await browser.close() 84 | return measurement 85 | } else { 86 | const measurement = await page.evaluate(measureFont, [fontNameStr, fontSize]) 87 | 88 | await browser.close() 89 | 90 | return measurement 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /packages/renderer-svg/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es2017", 5 | "esModuleInterop": true, 6 | "moduleResolution": "node", 7 | "lib": ["esnext", "DOM"], 8 | "sourceMap": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/shiki/README.md: -------------------------------------------------------------------------------- 1 |2 |
Shiki
3 | 4 |5 | Shiki is a beautiful Syntax Highlighter. Demo. 6 |
7 | 8 | ## Usage 9 | 10 | ```sh 11 | npm i shiki 12 | # yarn add shiki 13 | ``` 14 | 15 | ```js 16 | const shiki = require('shiki') 17 | 18 | shiki 19 | .getHighlighter({ 20 | theme: 'nord' 21 | }) 22 | .then(highlighter => { 23 | console.log(highlighter.codeToHtml(`console.log('shiki');`, 'js')) 24 | }) 25 | 26 | //
27 | //
28 | //
22 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/packages/shiki/samples/java.sample:
--------------------------------------------------------------------------------
1 | public class HelloWorld {
2 |
3 | public static void main(String[] args) {
4 | // Prints "Hello, World" to the terminal window.
5 | System.out.println("Hello, World");
6 | }
7 |
8 | }
9 |
10 | // From https://introcs.cs.princeton.edu/java/11hello/HelloWorld.java.html
--------------------------------------------------------------------------------
/packages/shiki/samples/javascript.sample:
--------------------------------------------------------------------------------
1 | // posts will be populated at build time by getStaticProps()
2 | function Blog({ posts }) {
3 | return (
4 | …
23 | …
24 | …
25 | -
5 | {posts.map((post) => (
6 |
- {post.title} 7 | ))} 8 |
-
5 | {posts.map((post) => (
6 |
- {post.title} 7 | ))} 8 |
console.log('shiki');Shiki is "a beautiful Syntax Highlighter"Shiki is "a beautiful Syntax Highlighter"Shiki is "a beautiful Syntax Highlighter"`
22 | if (options.langId) {
23 | html += `${options.langId}`
24 | }
25 | html += ``
26 |
27 | lines.forEach((l: IThemedToken[]) => {
28 | html += ``
29 |
30 | l.forEach(token => {
31 | const cssDeclarations = [`color: ${token.color || options.fg}`]
32 | if (token.fontStyle > FontStyle.None) {
33 | cssDeclarations.push(FONT_STYLE_TO_CSS[token.fontStyle])
34 | }
35 | html += `${escapeHtml(token.content)}`
36 | })
37 | html += `\n`
38 | })
39 | html = html.replace(/\n*$/, '') // Get rid of final new lines
40 | html += ``
41 |
42 | return html
43 | }
44 |
45 | const htmlEscapes = {
46 | '&': '&',
47 | '<': '<',
48 | '>': '>',
49 | '"': '"',
50 | "'": '''
51 | }
52 |
53 | function escapeHtml(html: string) {
54 | return html.replace(/[&<>"']/g, chr => htmlEscapes[chr])
55 | }
56 |
--------------------------------------------------------------------------------
/packages/shiki/src/resolver.ts:
--------------------------------------------------------------------------------
1 | /*---------------------------------------------------------
2 | * Copyright (C) Microsoft Corporation. All rights reserved.
3 | *--------------------------------------------------------*/
4 | 'use strict'
5 |
6 | import { IRawGrammar, IOnigLib, RegistryOptions } from 'vscode-textmate'
7 | import { languages } from './languages'
8 |
9 | import { fetchGrammar } from './loader'
10 | import { ILanguageRegistration } from './types'
11 |
12 | export class Resolver implements RegistryOptions {
13 | public languagesPath: string = 'languages/'
14 |
15 | private readonly languageMap: { [langIdOrAlias: string]: ILanguageRegistration } = {}
16 | private readonly scopeToLangMap: { [scope: string]: ILanguageRegistration } = {}
17 |
18 | private readonly _onigLibPromise: Promiseconst shiki = require('shiki')
2 |
3 | shiki.getHighlighter({
4 | theme: JSON.parse(fs.readFileSync('./monochrome-dark-subtle.json', 'utf-8'))
5 | })
6 |
11 |
20 | );
21 | }
22 |
23 | export default App;
24 | ```
--------------------------------------------------------------------------------
/packages/site/rockstar.html:
--------------------------------------------------------------------------------
1 |
12 | 
13 |
15 | Welcome to React
14 |
16 | To get started, edit src/App.tsx and save to reload.
17 |
Midnight takes your heart and your soul
2 | While your heart is as high as your soul
3 | Put your heart without your soul into your heart
4 |
5 | Give back your heart
6 |
7 |
8 | Desire is a lovestruck ladykiller
9 | My world is nothing
10 | Fire is ice
11 | Hate is water
12 | Until my world is Desire,
13 | Build my world up
14 | If Midnight taking my world, Fire is nothing and Midnight taking my world, Hate is nothing
15 | Shout "FizzBuzz!"
16 | Take it to the top
17 |
18 | If Midnight taking my world, Fire is nothing
19 | Shout "Fizz!"
20 | Take it to the top
21 |
22 | If Midnight taking my world, Hate is nothing
23 | Say "Buzz!"
24 | Take it to the top
25 |
26 | Whisper my world
27 | 吾有一言。曰「「春日宴。」」。書之。
2 | 有數九。名之曰「酒數」。
3 |
4 | 恆為是。若「酒數」等於零者乃止也。
5 |
6 | 吾有三言。曰「「與君」」。曰「酒數」。
7 | 曰「「杯酒。可以窮歡宴。綠酒一杯歌一遍。」」。書之。
8 |
9 | 減「酒數」以一。昔之「酒數」者。今其是矣云云。
10 |
11 | 吾有一言。曰「「綠酒千杯腸已爛。」」。書之。
--------------------------------------------------------------------------------
/packages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "files": [],
4 | "references": [{ "path": "./shiki" }, { "path": "./renderer-svg" }]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vuepress-plugin/README.md:
--------------------------------------------------------------------------------
1 | # vuepress-plugin-shiki
2 |
3 | ```bash
4 | yarn global add vuepress@next
5 | yarn add -D vuepress-plugin-shiki
6 | ```
7 |
8 | `.vuepress/config.js`
9 |
10 | ```js
11 | module.exports = {
12 | plugins: {
13 | shiki: { theme: 'nord' } // theme: TTheme
14 | }
15 | }
16 | ```
17 |
18 | [`TTheme` values](../themes/README.md#literal-values)
19 |
20 | ```ts
21 | export type TVSCode =
22 | | 'abyss'
23 | | 'dark_vs'
24 | | 'light_vs'
25 | | 'hc_black'
26 | | 'dark_plus'
27 | | 'light_plus'
28 | | 'kimbie_dark'
29 | | 'monokai'
30 | | 'monokai_dimmed'
31 | | 'quietlight'
32 | | 'red'
33 | | 'solarized_dark'
34 | | 'solarized_light'
35 |
36 | export type TMaterial =
37 | | 'Darker-High-Contrast'
38 | | 'Darker'
39 | | 'Default-High-Contrast'
40 | | 'Default'
41 | | 'Lighter-High-Contrast'
42 | | 'Lighter'
43 | | 'Ocean-High-Contrast'
44 | | 'Ocean'
45 | | 'Palenight-High-Contrast'
46 | | 'Palenight'
47 |
48 | export type TNice =
49 | | 'nord'
50 | | 'min-light'
51 | | 'min-dark'
52 | | 'white'
53 | | 'white-night'
54 |
55 | export type TTheme = TVSCode | TMaterial | TNice
56 | ```
--------------------------------------------------------------------------------
/packages/vuepress-plugin/index.js:
--------------------------------------------------------------------------------
1 | const shiki = require('shiki')
2 |
3 | let h
4 |
5 | module.exports = (options, ctx) => {
6 | return {
7 | async ready() {
8 | h = await shiki.getHighlighter({
9 | theme: options.theme ? options.theme : 'nord',
10 | langs: options.langs ? options.langs : []
11 | })
12 | },
13 |
14 | chainMarkdown(config) {
15 | config.options.highlight((code, lang) => {
16 | if (!lang) {
17 | return `${escapeHtml(code)}