ember-showdown-prism
Advanced tools
ember-showdown-prism is a drop-in addon that automatically adds Prism syntax highlighting to code blocks if you are using showdown to render your Markdown.
This addon also provides filename wrappers to the code block, with filetype icons, if a code block is marked with a data-filename attribute:
````handlebars {data-filename=app/templates/blog-post.hbs}
<h1>{{@model.title}}</h1>
<h2>by {{@model.author}}</h2>
<div class="intro">
{{@model.intro}}
</div>
<hr>
<div class="body">
{{@model.body}}
</div>
```
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. The line numbers also have anchors with ids added, which makes them clickable in Fastboot or prember environments.
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 building on top of the great work of ember-cli-showdown and ember-prism.
ember install ember-showdown-prism
Most people don't need to do anything to configure this addon as it comes with a sensible set of default languages that it supports, but if you want to customise the languages that Prism has access to then you can follow the ember-prism documentation on adding language
Note: because of the limitations of using Prism in a Node environment you cannot use most prism plugins, essentially you cannot use anything that requires the DOM element while the plugin code is running.
See the Contributing guide for details.
This project is licensed under the MIT License.
FAQs
The default blueprint for ember-cli addons.
We found that ember-showdown-prism demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.