shikijs / shiki Goto Github PK
View Code? Open in Web Editor NEWA beautiful yet powerful syntax highlighter
Home Page: http://shiki.style/
License: MIT License
A beautiful yet powerful syntax highlighter
Home Page: http://shiki.style/
License: MIT License
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?
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?
shiki/packages/shiki/package.json
Lines 19 to 24 in 56c230a
What is the function of the self-built dependency here, can it be upgraded to textmate5?
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>
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.
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
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.
This would make it easy to:
Offer a decoration API that allows marking specific ranges with:
This is easy to use programmatically.
The hard problem is how should the original Markdown look like.
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.
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;
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...
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:
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?
What is the font that is used in the website? (On the code blocks)
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
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.
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?
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 👍
These languages should live in core: https://www.tiobe.com/tiobe-index/
👋 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:
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.
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
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?
Need test coverage.
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
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.)
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?
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
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.
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()
.
Couldn't find dart in shiki languages list. Is it there but just not listed ?
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.
This one is a bit complicated. Currently I can think of two approaches:
For example, the TypeScript monorepo has a gatsby plugin for using shiki and I'm sure there are more
Adds a new package, which isn't included by default, which accepts pretty much any language
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.
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
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?
It seems that the implementation of html escape is wrong.
function escapeHtml(html: string) {
return html
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/'/g, ''')
}
It firstly converts >
to >
, then converts >
to &gt
, which is not what we expected.
I suggest checking out the implementation of lodash.
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')
})
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">></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">&</span><span style="color: #F8F8F2"> b </span><span style="color: #F92672">></span><span style="color: #F8F8F2"> c</span></code></pre>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.