Is this example correct?

https://github.com/octref/shiki/blob/master/packages/themes/README.md#yours

const { Shiki } = require('shiki')
const { loadTheme } = require('shiki-themes')

const t = loadTheme('./prism.json');
const h = await new Shiki(t);

Uncaught (in promise) TypeError: Shiki is not a constructor

Hi, not really an issue, just wondering if it's actually possible to use Shiki in browser instead of node?
I have tried to bundle it with webpack and https://github.com/Jam3/babel-plugin-static-fs plugin, but still getting errors related to fs module calls for Onigasm and etc.

It seems that the implementation of html escape is wrong.

function escapeHtml(html: string) {
  return html
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/&/g, '&amp;')
    .replace(/'/g, '&apos;')
}

It firstly converts > to &gt, then converts &gt to &ampgt, which is not what we expected.

I suggest checking out the implementation of lodash.

Hello, I would like to use Shiki in one my Next.js project, and I'm not sure how to set up Shiki properly (e.g. the best way)

Any recommendations / examples please?

I also use MDX if it helps

I'm using the vuepress plugin, and found shiki only supports rendering codeblocks when a certain language is given (like javascript). Can future versions support "plain" codeblocks?

Couldn't find dart in shiki languages list. Is it there but just not listed ?

Adds a new package, which isn't included by default, which accepts pretty much any language

ENOENT: no such file or directory, open 'node_modules\onigasm\lib\onigasm.wasm'

I have no idea what .wasm is and how to handle it...

https://github.com/microsoft/vscode/blob/f7f05dee53fb33fe023db2e06e30a89d3094488f/src/vs/platform/theme/common/colorRegistry.ts#L258-L268

fg/bg shouldn't be black/white. They should be VS Code's default color, if unset in theme.

For example, dark plus theme has no fg color, and it should fallback to #BBBBBB, not #fff

Would it be possible to add support for line numbers?

Bonus points for not restricting you to auto-generate them either. For example, when showing a Git diff, the line numbers will change.

From the Java Language Specification:

8.1.1.3 strictfp Classes
The effect of the strictfp modifier is to make all float or double expressions
within  the  class  declaration  (including  within  variable  initializers,  instance
initializers, static initializers, and constructors) be explicitly FP-strict (§15.4).
This implies that all methods declared in the class, and all nested types declared in
the class, are implicitly strictfp.

This modifier doesn't exist in the java.json file. So the syntax highlighting can't work for that.

Need test coverage.

Hey 👋

It seems that PHP code blocks without a <?php opening tag don't get colorised correctly.

I've tested and if you add a <?php tag, everything starts working correctly.

I guess this is probably an upstream issue?

Not much else to say... This also seems to happen with dark_vs. I spent a bit of time digging into it, but haven't figured out the fix.

If the language is undefined - there's an error

highlighter.codeToHtml('', undefined);

TypeError: Cannot read property 'tokenizeLine' of undefined

But I just want to have a simple block (just like GFM):

no highlighting

Using plaintext, txt, text doesn't work

highlighter.codeToHtml('', 'plaintext');

shiki-languages seems to be missing plaintext too.

export declare type TCommonLang = 'clojure' | 'c' | 'cpp' | 'css' | 'go' | 'html' | 'jade' | 'java' | 'jsx' | 'javascript' | 'json' | 'less' | 'lua' | 'makefile' | 'markdown' | 'objective-c' | 'perl6' | 'php' | 'python' | 'r' | 'ruby' | 'rust' | 'scss' | 'shellscript' | 'sql' | 'swift' | 'typescript' | 'tsx' | 'xml' | 'yaml'
/**
 * Extra grammars
 */
 | 'haml' | 'graphql' | 'postcss' | 'sass' | 'stylus' | 'vue' | 'vue-html' | 'latex';
export declare type TCommonLangAlias = 'clj' | 'c++' | 'htm' | 'xhtml' | 'js' | 'objc' | 'py' | 'rb' | 'shell' | 'bash' | 'sh' | 'ts'
/**
 * Extra grammars
 */
 | 'styl' | 'tex';
export declare type TOtherLang = 'bat' | 'coffeescript' | 'diff' | 'dockerfile' | 'fsharp' | 'git-commit' | 'git-rebase' | 'groovy' | 'handlebars' | 'ini' | 'properties' | 'perl' | 'powershell' | 'razor' | 'shaderlab' | 'vb' | 'xsl';
export declare type TLang = TCommonLang | TCommonLangAlias | TOtherLang;

const main = async () => {
  const shiki = require('shiki')
  const highlighter = await shiki.getHighlighter({ theme: 'monokai' })
  const code = 'a & b > c'
  const lang = 'js'
  console.log(highlighter.codeToHtml(code, lang))
}

main()

generates

<pre class="shiki" style="background-color: #272822"><code><span style="color: #F8F8F2">a </span><span style="color: #F92672">&</span><span style="color: #F8F8F2"> b </span><span style="color: #F92672">&gt;</span><span style="color: #F8F8F2"> c</span></code></pre>

instead of

<pre class="shiki" style="background-color: #272822"><code><span style="color: #F8F8F2">a </span><span style="color: #F92672">&amp;</span><span style="color: #F8F8F2"> b </span><span style="color: #F92672">&gt;</span><span style="color: #F8F8F2"> c</span></code></pre>

I am currently tuning my c++ grammar heavily, so I moved it out of the directory and created a symlink inside. This makes running the shiki process fail.

Problem: Trying to use solarized_dark, solarized_light, or monokai_dimmed themes doesn't work.

Solution: The names of the themes does not match the name of the theme file, and so Shiki can't find the theme. Since the file names are set by VSCode, the names in the code should be changed to match the file names.

• solarized_dark → solarized-dark
• solarized_light → solarized-light
• monokai_dimmed → dimmed-monokai

Thanks for this great tool!

I use Shiki in Gridsome via https://gridsome.org/plugins/gridsome-plugin-remark-shiki

I wonder how it is possible to add syntax highlighting for Twig and PHP code snippets which seems to be missing currently.

The languages package shares a lot in common with tsconfig/bases - I think I can port over some of that code (from deno (unless you'd prefer to have some deno scripting?)) to automate the acquisition of the tmlanaguges, check if they're updated and then publish a new copy of the languages package.

I built a nightly deploy tool which we use in the svelte language-tools monorepo which would work perfect for this repo. On top of that it was on my todo to create orta/monorepo-deploy-nightly#6 which is useful for both

Hello,
I don't think material ocean is exact copy of oceanic theme,

when i compare color codes, most of the are matching for deep ocean theme https://github.com/ChrisRM/material-theme-jetbrains/blob/master/src/main/resources/themes/deepocean.theme.json

How do I use a custom grammar, in the form of a string of it's path for the syntax highlighting in shiki?
I want to do this in the function shiki.codeToHtml().

Hi there! shiki is really awesome and thanks for your effort.

I hope syntaxes and themes will be available from dependency so we can make the most of the vast ecosystem of vscode.

Example:

// package.json
{
  "dependencies": {
    "vscode-night-owl": "https://github.com/sdras/night-owl-vscode-theme",
    "vscode-rainbow-csv": "https://github.com/mechatroner/vscode_rainbow_csv"
  }
}

shiki.use('vscode-night-owl')
shiki.use('vscode-rainbow-csv')

shiki.getHighlighter({
  theme: 'night-owl'
}).then(highlighter => {
  return highlighter.codeToHtml('foo,bar,baz', 'csv')
})

This would make it easy to:

• Export to Sketch
• Capture screenshot in Puppeteer

See microsoft/vscode-docs#3604.

It looks like the generated code blocks don't put all characters in quotes which means they are ignored by screen readers such as Windows Narrator and NVDA.

Compared to the previous pre-shiki rendering, which used quoted text for all elements:

These languages should live in core: https://www.tiobe.com/tiobe-index/

For example, the TypeScript monorepo has a gatsby plugin for using shiki and I'm sure there are more

What is the font that is used in the website? (On the code blocks)

I was looking through the packages\languages\src\lang.ts for c# or csharp, but couldn't find it. Can support be added or should I use a similar language like java? If support can be added, how would I go about that?

I noticed .tmLanguage files are being used, could something from this repo dotnet/csharp-tmlanguage be used?

Sample from custom theme for CSS language:

{
	"scope": "keyword.other.important",
	"settings": {
		"fontStyle": "bold",
		"foreground": "#dd4a68"
	}
},

The color #dd4a68 is applied properly, but not the font-weight.

The current Java Language Specification says:

What do you think about adding this commonly used restricted identifiers var and yield and the ten restricted keywords to shiki?

What is the function of the self-built dependency here, can it be upgraded to textmate5?

Notice these black parts, this is because Adobe Illustrator(2020) cannot handle colors with alpha.

style="fill: #D8DEE9FF" must be written as style="fill: #D8DEE9; opacity:1;" or just trim FF.

Adobe XD(2020) also has this problem.

Is there any chance we can get Svelte support? Because I am tired of fighting with Prism.js and its themes.

Is it only a matter of adding upstream VSCode language syntax file and adding it to the list of supported languages? What else is needed? How can I help?

https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode/syntaxes/svelte.tmLanguage.json

i'd like to add toml, which my company uses a lot and is recognized on github: https://github.com/toml-lang/toml

i think as a first step we could simply add it as an alias of yaml. what do you think?

const main = async () => {
  const shiki = require('shiki')
  const highlighter = await shiki.getHighlighter({ theme: 'monokai' })
  const code = 'whatever'
  const lang = 'txt'
  console.log(highlighter.codeToHtml(code, lang))
}

main()

generates

<pre class="shiki" style="background-color: #272822"><code><span style="color: undefined">whatever</span></code></pre>

Getting this error when trying to use any of the following syntax:
| 'bat'
| 'coffeescript'
| 'diff'
| 'dockerfile'
| 'fsharp'
| 'git-commit'
| 'git-rebase'
| 'groovy'
| 'handlebars'
| 'ini'
| 'properties'
| 'perl'
| 'powershell'
| 'razor'
| 'shaderlab'
| 'vb'
| 'cmd'
| 'xsl'

UnhandledPromiseRejectionWarning: Error: No language registration for handlebars

👋 I'm thinking about how to handle dark and light themes, microsoft/TypeScript-Website#342 eventually I'm going to need to figure out how to make a dark mode which uses css classes because these poor dark mode folks have the same code color schema:

So, I'm wondering what you think might be the best way to do it (and whether it's something I should do upstream back here)

I have two ideas:

• Have a single theme, convert the colors hex to css classes
• Try match two separate themes together

Hi @octref Miguel has updated the VS Code light theme to fix a color contrast issue with the VS Code website code blocks. microsoft/vscode@eb781a2

What's the best way to process this update and republished this module?

This one is a bit complicated. Currently I can think of two approaches:

1. With microsoft/vscode#91375, get semantic highlighting results by running an e2e test that interacts with a real instance of VS Code (and its language servers).
2. Run VS Code in browser context: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#run and use puppeteer to extract colors. This is kinda far-fetched, but this would mean we neither need to maintain an integration with vscode-textmate nor with the semantic highlighters.

Consider the following:

const shiki = require('shiki')

shiki.getHighlighter({
  theme: 'light_plus'
}).then(highlighter => {
  console.log(highlighter.codeToHtml(`return 'shiki';`, 'js'))
})

This is the result I’m getting:

<pre class="shiki" style="background-color: #fff"><code><span style="color: #0000FF">return</span><span style="color: #000000"> </span><span style="color: #A31515">'shiki'</span><span style="color: #000000">;</span></code></pre>

But this is what I see in VS Code using the same theme:

(Note the color of the return keyword.)

Offer a decoration API that allows marking specific ranges with:

• bg color
• font settings
• text decorations
• links

This is easy to use programmatically.
The hard problem is how should the original Markdown look like.

1. publish to CDN
2. bundle to a pack
3. compile with multi module. e.g es6, commonjs, umd, amd

Django / Jinja templates are heavily used in Python world and would be great addition to Shiki supported languages.

In an unrelated note, Kudos for this awesome library, yet another home run 👍