Countdown to The New 12 months

That is the twenty-ninth in our DecEmber collection–”Countdown to The New 12 months: 31 Days of Ember Addons”. We plan to spotlight a brand new addon every day till the brand new yr, and we hope you will be a part of us for the enjoyable!

Day 29

Earlier than I took this task, I did not know something about ember-code-snippet. Now, I am glad that I did. This addon surfaced in 2015, has acquired common updates, and powers a lot of my favourite addons. (Are you able to guess how?)

What It Does

ember-code-snippet permits you to render code snippets in your app (or addon). Fairly useful if you wish to create a technical weblog or doc your elements.

It gives a helper known as get-code-snippet in order that (1) it can save you code snippets in a devoted folder and (2) create your personal part to customise their look.

For example the use, we’ll think about a code snippet from the Ember.js Octane vs Traditional Cheat Sheet:

// my-app-name/snippets/make-your-own-elementId.js

import Element from '@glimmer/part';
import { guidFor } from '@ember/object/internals';

export default class InputTextComponent extends Element {
  inputId = 'textInput-' + guidFor(this);
}

Beginning model 3.0, you may determine what library to make use of for syntax highlighting. For instance, you would possibly wish to check out Prism.js:

{{!-- my-app-name/app/elements/code-snippet/template.hbs --}}

{snippet}
  <CodeBlock
    @code={{snippet.supply}}
    @language={{snippet.language}}
  />
{{/let}}

Perhaps you need Spotlight.js as an alternative:

{{!-- my-app-name/app/elements/code-snippet/template.hbs --}}

{snippet}
  <pre {{did-insert this.highlightCode}}><code class="language-{{snippet.language}}">{{snippet.supply}}</code></pre>
{{/let}}

Regardless of the styling strategy, the invocation stays the identical:

{{!-- my-app-name/templates/utility.hbs --}}

<CodeSnippet
  @fileName="make-your-own-elementId.js"
/>

I feel the truth that many high addons use ember-code-snippet for documentation is a testomony to its well-designed API. It’s possible you’ll not have realized this (I did not till at the moment) as a result of every doc has a singular fashion:

Do you utilize ember-code-snippet? Or one prefer it? We would love to listen to about Ember addons that carry you pleasure!