Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ignacemaes/ember-showdown-shiki
Adds Shiki syntax highlighting for showdown-based markdown code blocks.
https://github.com/ignacemaes/ember-showdown-shiki
ember shiki showdown
Last synced: 23 days ago
JSON representation
Adds Shiki syntax highlighting for showdown-based markdown code blocks.
- Host: GitHub
- URL: https://github.com/ignacemaes/ember-showdown-shiki
- Owner: IgnaceMaes
- License: mit
- Created: 2024-01-16T20:26:23.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-06-29T14:37:48.000Z (4 months ago)
- Last Synced: 2024-10-14T06:41:07.480Z (23 days ago)
- Topics: ember, shiki, showdown
- Language: TypeScript
- Homepage:
- Size: 532 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-showdown-shiki
ember-showdown-shiki is a drop-in addon that automatically adds [Shiki](https://github.com/shikijs/shiki) syntax highlighting to code blocks if you are using [showdown](https://github.com/showdownjs/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:
```markdown
````gjs {data-filename=app/components/blog-post.gjs}
{{@model.title}}
by {{@model.author}}
{{@model.intro}}
{{@model.body}}
```
```
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](https://github.com/empress/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:
```js
module.exports = function () {
return {
buildSandboxGlobals(defaultGlobals) {
return Object.assign({}, defaultGlobals, {
atob: atob,
});
},
};
};
```
### Configuration
In `config/environment.js` you can configure the following options:
```js
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](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).