ember-showdown-prism

ember-showdown-prism

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.

Compatibility

• Ember.js v3.16 or above
• Ember CLI v3.16 or above
• Node.js v16 or above

Installation

ember install ember-showdown-prism

Usage

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.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Changelog

v4.3.0 (2023-09-29)

:rocket: Enhancement

• #51 Use the setup function from ember-prism (@NullVoxPopuli)

:bug: Bug Fix

• #57 Fix data-diff first line bug (@fry69)

Committers: 2

• @NullVoxPopuli
• @fry69

4.2.0 / 2023-07-10

• add support for data-diff usage in code block #53 from @mansona

4.1.0 / 2023-07-03

• move ember-prism back to dependencies #49 from @mansona

4.0.0 / 2023-07-03

• update to v5.0 with ember-cli-update #47 from @mansona
• move showdown to a peer dependency #45 from @mansona
• breaking: drop support for node < 16 #46 from @mansona

3.2.0 / 2022-08-06

• update ember-prism #31 from @mansona
• fix ember-try npm overrides #27 from @mansona

3.1.0 / 2022-05-05

• add typescript and diff components #25 from @mansona

3.0.0 / 2021-12-31

• update with ember-cli-update to 3.28 #20 from @mansona
• add a basic test #19 from @mansona
• Breaking: drop Node 10 and unify github ci workflow with blueprint #18 from @mansona

2.3.0 / 2021-08-12

• fix dollar signs in codeblocks breaking when running through Prism #13 from @nickschot
• add a $ to the demo app to demonstrate the issues with it #14 from @nickschot
• update with ember-cli-update #16 from @mansona
• Move from travis to github actions #15 from @mansona
• add prember for netlify example app #10 from @mansona
• add a better README #9 from @mansona

2.2.0 / 2020-08-20

• add linkable line numbers to highlighted code blocks #8 from @nickschot

2.1.0 / 2020-08-19

• add assertion if missing language is used & fallback to non-prism rendering #5 from @nickschot
• add YAML to the default enabled languages #6 from @nickschot

2.0.0 / 2020-08-17

This is only a breaking change because it dropped support for Node 8 and Ember < 3.12. They will likely continue to work for a little while but we are no longer testing them 👍

• use findHost to find the app (fixes non-working prism when using this addon indirectly) #4 from @nickschot
• Breaking: Update dependencies #2 from @mansona