diff --git a/markdown.config.js b/markdown.config.js new file mode 100644 index 0000000..bd3d155 --- /dev/null +++ b/markdown.config.js @@ -0,0 +1,11 @@ +const fs = require('fs') +const path = require('path') +const markdownMagic = require('markdown-magic') + +const config = { + transforms: { + TYPE: require('markdown-magic-inline-types') + } +} + +markdownMagic("packages/*/README.md", config) \ No newline at end of file diff --git a/package.json b/package.json index a9e5911..2ccb54e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ ], "scripts": { "test": "jest", - "bootstrap": "pnpm build -r --workspace-concurrency 1 && md-magic --path 'packages/*/README.md'", + "bootstrap": "pnpm build -r --workspace-concurrency 1 && md-magic", "build": "pnpm run build -r" }, "devDependencies": { @@ -16,6 +16,7 @@ "glob": "^7.1.7", "jest": "^27.0.5", "markdown-magic": "^2.2.0", + "markdown-magic-inline-types": "^1.0.2", "pleb": "^3.4.4", "prettier": "^2.3.1", "typescript": "^4.3.4" diff --git a/packages/shiki-twoslash/README.md b/packages/shiki-twoslash/README.md index 875bee6..227791b 100644 --- a/packages/shiki-twoslash/README.md +++ b/packages/shiki-twoslash/README.md @@ -45,51 +45,64 @@ const b = "345" ### User Settings -The config which a user passes is an intersection of Shiki's [`HighlighterOptions`](https://unpkg.com/shiki/dist/index.d.ts) +The config which you pass in is a mix of Shiki's [`HighlighterOptions`](https://unpkg.com/shiki/dist/index.d.ts) + ```ts interface HighlighterOptions { - theme?: IThemeRegistration - langs?: (Lang | ILanguageRegistration)[] - themes?: IThemeRegistration[] - paths?: IHighlighterPaths + theme?: IThemeRegistration; + langs?: (Lang | ILanguageRegistration)[]; + themes?: IThemeRegistration[]; + /** + * Paths for loading themes and langs. Relative to the package's root. + */ + paths?: IHighlighterPaths; } ``` + + With twoslash's [`TwoSlashOptions`](https://unpkg.com/@typescript/twoslash/dist/index.d.ts) + ```ts export interface TwoSlashOptions { - /** Allows setting any of the handbook options from outside the function, useful if you don't want LSP identifiers */ - defaultOptions?: Partial - /** Allows setting any of the compiler options from outside the function */ - defaultCompilerOptions?: CompilerOptions - /** Allows applying custom transformers to the emit result, only useful with the showEmit output */ - customTransformers?: CustomTransformers - /** An optional copy of the TypeScript import, if missing it will be require'd. */ - tsModule?: TS - /** An optional copy of the lz-string import, if missing it will be require'd. */ - lzstringModule?: LZ - /** - * An optional Map object which is passed into @typescript/vfs - if you are using twoslash on the - * web then you'll need this to set up your lib *.d.ts files. If missing, it will use your fs. - */ - fsMap?: Map - /** The cwd for the folder which the virtual fs should be overlaid on top of when using local fs, opts to process.cwd() if not present */ - vfsRoot?: string + /** Allows setting any of the handbook options from outside the function, useful if you don't want LSP identifiers */ + defaultOptions?: Partial; + /** Allows setting any of the compiler options from outside the function */ + defaultCompilerOptions?: CompilerOptions; + /** Allows applying custom transformers to the emit result, only useful with the showEmit output */ + customTransformers?: CustomTransformers; + /** An optional copy of the TypeScript import, if missing it will be require'd. */ + tsModule?: TS; + /** An optional copy of the lz-string import, if missing it will be require'd. */ + lzstringModule?: LZ; + /** + * An optional Map object which is passed into @typescript/vfs - if you are using twoslash on the + * web then you'll need this to set up your lib *.d.ts files. If missing, it will use your fs. + */ + fsMap?: Map; + /** The cwd for the folder which the virtual fs should be overlaid on top of when using local fs, opts to process.cwd() if not present */ + vfsRoot?: string; } ``` + + And one extra for good luck: + ```ts export interface TwoslashShikiOptions { - /** A way to turn on the try buttons seen on the TS website */ - addTryButton?: true - /** A way to disable implicit React imports on tsx/jsx language codeblocks */ - disableImplicitReactImport?: true + /** A way to turn on the try buttons seen on the TS website */ + addTryButton?: true; + /** A way to disable implicit React imports on tsx/jsx language codeblocks */ + disableImplicitReactImport?: true; + /** A way to add a div wrapper for multi-theme outputs */ + wrapFragments?: true; } ``` + That said, most people will just want to set a `theme`: @@ -161,6 +174,8 @@ async function visitor(highlighterOpts) { ##### `renderCodeToHTML` + + ```ts /** * Renders a code sample to HTML, automatically taking into account: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f04c0e..7f4c5f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,7 @@ importers: glob: ^7.1.7 jest: ^27.0.5 markdown-magic: ^2.2.0 + markdown-magic-inline-types: ^1.0.2 pleb: ^3.4.4 prettier: ^2.3.1 typescript: ^4.3.4 @@ -22,6 +23,7 @@ importers: glob: 7.1.7 jest: 27.0.5 markdown-magic: 2.2.0 + markdown-magic-inline-types: 1.0.2 pleb: 3.4.4 prettier: 2.3.1 typescript: 4.3.4 @@ -7334,6 +7336,12 @@ packages: engines: {node: '>=0.10.0'} dev: true + /markdown-magic-inline-types/1.0.2: + resolution: {integrity: sha512-LRJCxpQGbOlUp6v9kCc0nR0EGQvlZbNx2+BpiLFllPkCkINESWQa/jOAHCfFFe4FTj9LgLlocEDP1pSNBu4wgg==} + dependencies: + typescript: 4.3.4 + dev: true + /markdown-magic/2.2.0: resolution: {integrity: sha512-bjLM/dVX8bnhkBo1Ha167Hf+7OOU8xWmYRlYLitm0WFVAC+MdARQJl2/wJKiD3/wuHPcYJFGj3enUsS8h6Uyzg==} hasBin: true