Ember Showdown Prism

Start with something simple

This is an inline code example sh go do a thing.

Let's make it a block

sh go do a thing

Adding a javascript as a language to get syntax highlighting

let thing = 'face'; let myElement = $('.my-element');

Now let's do something a bit more complex

app/templates/blog-post.hbs
<h1>{{@model.title}}</h1> <h2>by {{@model.author}}</h2> <h3>{{ (count @model.posts) }} # posts</h3> <div class="intro"> {{@model.intro}} </div> <hr> <div class="body"> {{@model.body}} </div> <Nested::Component class="some classes {{if (this.someHelper this.foo 12) "classes when true" "classes when false" }} " @doAction={{fn this.someAction 120}} @argB={{hash foo="string" bar=true baz=120 yolo=(array 12 "string" (hash foo=this.something)) bax=(fn this.someAction 120) }} {{resize this.handleResize (fn this.idk 2 "str")}} > <:block as |foo baz|> {{foo}} {{#let foo.bar 12 as |fooBar num|}} <fooBar @num={{num}} @arg={{12}} /> {{/let}} {{! comment }} {{!-- block }} TODO: Indentation is broken after that comment --}} <baz.component /> </:block> </Nested::Component>

With some different file types

app/controllers/blog-post.js
import Controller from '@ember/controller'; import { action } from '@ember/object'; export default class BlogPostController extends Controller { isExpanded = false @action toggleBody() { this.toggleProperty('isExpanded'); } }

Typescript never hurts

app/router.ts
import EmberRouter from '@ember/routing/router'; import config from './config/environment'; export default class Router extends EmberRouter { location = config.locationType; rootURL = config.rootURL; } Router.map(function() {});

With a diff:

app/router.js
import EmberRouter from '@ember/routing/router'; import config from './config/environment'; const Router = EmberRouter.extend({ location: config.locationType, rootURL: config.rootURL }); Router.map(function() { + this.route('about'); - this.route('face'); }); export default Router;

With a diff on the first line:

app/router.js
-import EmberRouter from '@ember/routing/router'; +import EmberRouter from '@embroider/router'; import config from './config/environment'; const Router = EmberRouter.extend({ location: config.locationType, rootURL: config.rootURL }); Router.map(function() { this.route('about'); }); export default Router;