Shiki Alternatives

Similar projects and alternatives to shiki

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a better shiki alternative or higher similarity.

Suggest an alternative to shiki

shiki reviews and mentions

Posts with mentions or reviews of shiki. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-05-02.
  • SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks
    2 projects | dev.to | 2 May 2022
    block will be horizontally scrollable. For accessibility it will need to be focusable. This is possible by adding a tabindex attribute to the element. At the time of writing it is not possible to do this within Shiki, though there is a pull request to modify the API. Instead we will just update the output HTML using node-html-parser. Add this new function to src/lib/utilitties/codeHighlighter.mjs: /** * @param html {string} - code to highlight * @returns {string} - highlighted html */ function makeFocussable(html) { const root = parse(html); root.querySelector('pre').setAttribute('tabIndex', '0'); return root.toString(); } Enter fullscreen mode Exit fullscreen mode Then use the function in line 42: async function highlighter(code, lang, meta) { const shikiHighlighter = await getHighlighter({ theme: THEME, }); let html = shikiHighlighter.codeToHtml(code, { lang, }); html = makeFocussable(html); return escapeHtml(html); } Enter fullscreen mode Exit fullscreen mode ⭐ Using SvelteKit with Shiki: Extra Line Highlighting We might want to add additional highlighting to particular lines. One way to do this with Shiki is to add a new class to certain lines. This is possible using the lineOptions field in the Shiki codeToHtml function call options. We just need to pass in an array of objects representing lines we want to add the class to. This array’s elements include the class we want to add to the line. Although the class can be different for each line, that’s a little more than we need here. Here is the final version of the highlighter function: /** * @param code {string} - code to highlight * @param lang {string} - code language * @param meta {string} - code meta * @returns {string} - highlighted html */ async function highlighter(code, lang, meta) { const shikiHighlighter = await getHighlighter({ theme: THEME, }); let html; if (!meta) { html = shikiHighlighter.codeToHtml(code, { lang, }); } else { const highlightMeta = /{([\d,-]+)}/.exec(meta)[1]; const highlightLines = rangeParser(highlightMeta); html = shikiHighlighter.codeToHtml(code, { lang, lineOptions: highlightLines.map((element) => ({ line: element, // line number classes: ['highlight-line'], })), }); } html = makeFocussable(html); return escapeHtml(html); } export default highlighter; Enter fullscreen mode Exit fullscreen mode So here we check if there is range meta passed into the highlighter. When we do have meta, we parse that into an array of individual line numbers which need highlighting in the rangeParser function which we will add in a moment. For each line we need to highlight, we add the highlight-line class. We added styling for this earlier in src/styles/styles.css (lines 36– 42), though we did not mention it at the time. Moving on add this code for range parsing to the same codeHighligher.mjs file: import { parse } from 'node-html-parser'; import { getHighlighter } from 'shiki'; Enter fullscreen mode Exit fullscreen mode Then: /** * Returns array of line numbers to be highlghted * @param {string} rangeString - range string to be parsed (e.g. {1,3-5,8}) * @returns {number[]} */ function rangeParser(rangeString) { const result = []; const ranges = rangeString.split(','); ranges.forEach((element) => { if (element.indexOf('-') === -1) { result.push(parseInt(element, 10)); } else { const limits = element.split('-'); const start = parseInt(limits[0], 10); const end = parseInt(limits[1], 10); for (let i = start; i <= end; i += 1) { result.push(i); } } }); return result; } Enter fullscreen mode Exit fullscreen mode Restart your dev server once more if the changes do not appear in the browser. Try adding highlight meta to the other code blocks or changing the highlight ranges for the Svelte block. Do not include any spaces in the ranges you specify. 💯 SvelteKit Shiki Syntax Highlighting: Test It should all be working now. We focussed on getting through the demo, rather than explaining every detail. Because of that please do let me know if there is some part which needs some clarification. Also remember to run accessibility contrast checks especially if you have changed the themes. 🙌🏽 SvelteKit Shiki Syntax Highlighting: Wrapup In this post we looked at: how to add Shiki syntax highlighting in SvelteKit, including line numbers and extra highlighting styles for some lines, generating your own code highlighter with mdsvex, how to manipulate the output Shiki HTML to make the result more accessible. I do hope there is at least one thing in this article which you can use in your work or a side project. Also let me know if you feel more explanation of the config is needed. This post is related to a question I got on Twitter on adding line numbers to code blocks, so do reach out if you have questions I might be able to write a post on. I also create short videos focussed on a particular topic. You can see the full SvelteKit code for this project on the Rodney Lab Git Hub repo. If you run into any issues, you can drop a comment below as well as reach out for a chat on Element. Also Twitter @mention if you have suggestions for improvements or questions. 🙏🏽 Feedback If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee. Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.
  • Powerful Code Blocks with Code Hike and MDX
    7 projects | dev.to | 6 Mar 2022
    Code Hike uses Shiki under the hood to provide syntax highlighting. We can find a list of all the supported themes here. Let us go with Monokai for this tutorial.
  • Is calling a Rust function from NodeJS via WASM like really slow?
    7 projects | reddit.com/r/rust | 28 Jan 2022
    I use a lot of different syntax highlighters to highlight code snippets from markdown contents, including shiki, prismjs, and highlightjs. But they all have different problems. For one, prismjs and highlightjs aren't as good as shiki at highlighting tokens, and sometimes result in incomplete/inconsistent highlightings. On the other hand, shiki, being ported part of from vscode's syntax highlighter, outputs IDE level super accurate syntax highlighting and has a great number of themes to choose. But shiki is super slow compared to prismjs and highlightjs.
  • Shiki: A beautiful static syntax highlighter
    1 project | news.ycombinator.com | 9 Dec 2021
  • Show HN: Code Hike – More than syntax highlighting
    1 project | news.ycombinator.com | 6 Dec 2021
  • Highlight your website's code blocks with VSCode
    1 project | news.ycombinator.com | 25 Sep 2021
    The tool on GitHub: https://github.com/shikijs/shiki

    I found this because I wanted to reuse the same grammar for CUE on GitHub for my statically generated website. I was using Chroma previously.

  • VuePress tips for development and productions
    2 projects | dev.to | 2 Sep 2021
    [ '@vuepress/plugin-shiki', isProd ? { theme: 'dracula', // see https://github.com/shikijs/shiki/blob/main/docs/themes.md for themes } : false, ],
  • 🚀10 Trending projects on GitHub for web developers - 20th August 2021
    4 projects | dev.to | 20 Aug 2021
    Shiki is a beautiful Syntax Highlighter. Demo
    4 projects | dev.to | 20 Aug 2021
    View on GitHub
  • Typescript hints in your code samples
    3 projects | dev.to | 7 Jul 2021
    Shiki is a syntax highlighter. Is based on text mate grammar. The same technology that powers VS Code syntax highlighting.
  • Show HN: I built a VS Code Theme Creator – easily make VS Code themes in browser
    3 projects | news.ycombinator.com | 25 Mar 2021
    Can’t look now because I’m on mobile, but excited to check it out when I get back to my desk. I’ll give more feedback if I have any then, but before that a couple quick thoughts:

    - if you’re not already aware of/using Shiki[1], it’s an excellent library for using VSCode/TextMate themes on the web, and another potential use case for a tool like this

    - it would be nice if some mobile functionality was supported where it’s not a heavy lift (eg browse themes)

    1: https://shiki.matsu.io/

Stats

Basic shiki repo stats
11
3,463
9.4
3 days ago

shikijs/shiki is an open source project licensed under MIT License which is an OSI approved license.

Less time debugging, more time building
Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
scoutapm.com
Find remote jobs at our new job board 99remotejobs.com. There are 2 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.