ember-showdown-shiki

ember-showdown-shiki

ember-showdown-shiki is a drop-in addon that automatically adds Shiki syntax highlighting to code blocks if you are using showdown to render your Markdown.

This addon also provides filename wrappers to the code block if a code block is marked with a data-filename attribute:

````gjs {data-filename=app/components/blog-post.gjs}
<template>
  <h1>{{@model.title}}</h1>
  <h2>by {{@model.author}}</h2>

  <div class="intro">
    {{@model.intro}}
  </div>
  <hr>
  <div class="body">
    {{@model.body}}
  </div>
</template>
``` 

You will also notice that the code sample has line numbers, this is built-in behaviour and they will be added to all code blocks.

This is also specifically designed to work in Node environments so that it can run effectively in Fastboot and prember and as it is a drop-in addon it will automatically start working if added to any Empress projects, so it can be used to add syntax highlighting to your empress-blog if your template doesn't already provide syntax highlighting.

This addon is inspired by the great work of ember-showdown-prism.

Compatibility

• Ember.js v4.8 or above
• Embroider or ember-auto-import v2
• Fastboot v4 or above
• Prember v2 or above
• Ember-cli-showdown v7 or above

Installation

ember install ember-showdown-shiki

Usage

When running this addon in Fastboot you have to configure the environment to make the globals used by Shiki available. To do this, create a config/fastboot.js with the following contents:

module.exports = function () {
  return {
    buildSandboxGlobals(defaultGlobals) {
      return Object.assign({}, defaultGlobals, {
        atob: atob,
      });
    },
  };
};

Configuration

In config/environment.js you can configure the following options:

module.exports = function (environment) {
  const ENV = {
    // Other options ...
    'ember-showdown-shiki': {
      theme: 'github-dark', // The theme to use for highlighting
      languages: ['javascript', 'handlebars'], // The languages to highlight
      colorReplacements: {
        '#24292e': '#1c1e24',
      }, // A map of colors to replace in the theme (see https://shiki.style/guide/theme-colors#color-replacements)
    },
  };
  return ENV;
};

By default the theme used is github-dark and all languages are loaded.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.