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>

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

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');
  }
}

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;