New Year’s Countdown


This is the 29th article in our DecemberEmber series-“New Year’s Countdown: 31 Days of Ember Plugin”. We plan to highlight a new plug-in every day before the new year, and we hope you can join us!

Day 29

I didn’t know anything before I accepted this task Embers code snippet. Now, I am glad I did. This plugin appeared in 2015, is updated regularly, and provides support for many of my favorite plugins. (guess what?)

What can it do

Embers code snippet Allows you to present code snippets in the application (or plug-in).If you want to create a technical blog or Document your components.

It provides a file called get-code-snippet This way (1) you can save code snippets in a dedicated folder, and (2) create your own components to customize their appearance.

To illustrate the usage, we will consider from Ember.js Octane vs Classic cheat sheet:

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

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';

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

Why i like it

ember-code-snippet is used Composability In my heart. It outputs the right amount of useful data so that you can use them to build more powerful things.

Starting from version 3.0, you can Decide which library to use for syntax highlighting. For example, you might want to try Prism.js:

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

{{#let (get-code-snippet @fileName) as |snippet|}}
  <CodeBlock
    @code={{snippet.source}}
    @language={{snippet.language}}
  />
{{/let}}
Code snippet highlighted using Prism.js

Maybe you want Highlight.js instead:

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

{{#let (get-code-snippet @fileName) as |snippet|}}
  <pre {{did-insert this.highlightCode}}><code class="language-{{snippet.language}}">{{snippet.source}}</code></pre>
{{/let}}
Code snippets highlighted using Highlight JS
Code snippets highlighted using Highlight.js

Regardless of the style method, the call remains the same:

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

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

I think the truth is Many top plugins The use of ember-code-snippet for documentation proves its well-designed API. You may not realize this (I didn’t realize it until today), because every document has a unique style:

Do you use ember-code-snippet? Or do you like it? We would love to know what the Ember plugin can bring you happiness!

Leave a Reply

Your email address will not be published. Required fields are marked *