home
  • Blog
1.3
  • Introduction
  • Getting Started
  • Another Section
  • Core Concepts
  • Examples
    • Basic Markdown
    • Code Syntax Highlighting
    • Callouts
    • Video
  • Guide test

Code Syntax Highlighting


This will just be a bunch of examples showing the different styles that are available. You can do code blocks or inline code in backticks.

mkdir super-rentals
app/random.json
// This is an example of a json file with comments and trailing commas
{ 
  "name": "something", // A comment saying something about something 
  "stuff": {
    "another-name": "something else",
  }
  // See, we survived a trailing comma - huzzah
}

It even supports template tag components via gjs or gts:

app/components/hello.gjs
import { on } from '@ember/modifier';
import FancyButton from './fancy-button';

function greet() {
  alert("AHOY!")
}

<template>
  <p>Hello, {{@name}}!</p>
  <FancyButton @label="Say hello!" {{on "click" greet}} />
</template>
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() {});
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() {
});

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

export default Router;
app/templates/about.hbs
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>
app/templates/application.hbs
{{!-- The following component displays Ember's default welcome message. --}}
<WelcomePage />
{{!-- Feel free to remove this! --}}

{{outlet}}

Just a little tip: you need to make sure that the code samples aren't the first or last things on the page

left arrow
Basic Markdown
Callouts
right arrow
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2024 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue Created with Sketch.