fixing code highlighting

Author: mansona

guides/v3.1.0/addons-and-dependencies/managing-dependencies.md

@@ -33,7 +33,7 @@ The globals provided by some assets (like `moment` in the below example) can be
 without the need to `import` them.
 Provide the asset path as the first and only argument.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/moment/moment.js');
 ```
 
@@ -44,7 +44,7 @@ about using an undefined variable.
 
 You can transform an anonymous AMD module to a named one by using the `amd` transformation.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/moment/moment.js', {
   using: [
     { transformation: 'amd', as: 'moment' }
@@ -64,7 +64,7 @@ with `require` for you automatically. It is not yet included with ember-cli by d
 ember install ember-cli-cjs-transform
 ```
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/showdown/dist/showdown.js', {
   using: [
     { transformation: 'cjs', as: 'showdown' }
@@ -79,7 +79,7 @@ You can now `import` them in your app. (e.g. `import showdown from 'showdown';`)
 If you need to use different assets in different environments, specify an object as the first parameter.
 That object's key should be the environment name, and the value should be the asset to use in that environment.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import({
   development: 'node_modules/moment/moment.js',
   production:  'node_modules/moment/min/moment.min.js'
@@ -90,7 +90,7 @@ If you need to import an asset in only one environment you can wrap `app.import`
 For assets needed during testing, you should also use the `{type: 'test'}` option to make sure they
 are available in test mode.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 if (app.env === 'development') {
   // Only import when in development mode
   app.import('vendor/ember-renderspeed/ember-renderspeed.js');
@@ -106,7 +106,7 @@ if (app.env === 'test') {
 
 Provide the asset path as the first argument:
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/foundation/css/foundation.css');
 ```
 
@@ -124,7 +124,7 @@ Third-party assets that are not added via `import()` will not be present in the
 
 By default, `import`ed assets will be copied to `dist/` as they are, with the existing directory structure maintained.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/font-awesome/fonts/fontawesome-webfont.ttf');
 ```
 
@@ -133,7 +133,7 @@ This example would create the font file in `dist/font-awesome/fonts/fontawesome-
 You can also optionally tell `import()` to place the file at a different path.
 The following example will copy the file to `dist/assets/fontawesome-webfont.ttf`.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
 });
@@ -143,7 +143,7 @@ If you need to load certain dependencies before others,
 you can set the `prepend` property equal to `true` on the second argument of `import()`.
 This will prepend the dependency to the vendor file instead of appending it, which is the default behavior.
 
-```ember-cli-build.js
+```javascript {data-filename=ember-cli-build.js}
 app.import('node_modules/es5-shim/es5-shim.js', {
   type: 'vendor',
   prepend: true

guides/v3.1.0/applications/dependency-injection.md

@@ -35,7 +35,7 @@ or application instance initializers (with the former being much more common).
 
 For example, an application initializer could register a `Logger` factory with the key `logger:main`:
 
-```app/initializers/logger.js
+```javascript {data-filename=app/initializers/logger.js}
 import EmberObject from '@ember/object';
 
 export function initialize(application) {
@@ -63,7 +63,7 @@ use the `instantiate: false` option to avoid attempts to re-instantiate it durin
 In the following example, the `logger` is a plain JavaScript object that should
 be returned "as is" when it's looked up:
 
-```app/initializers/logger.js
+```javascript {data-filename=app/initializers/logger.js}
 export function initialize(application) {
   let logger = {
     log(m) {
@@ -91,7 +91,7 @@ register your factories as non-singletons using the `singleton: false` option.
 
 In the following example, the `Message` class is registered as a non-singleton:
 
-```app/initializers/notification.js
+```javascript {data-filename=app/initializers/notification.js}
 import EmberObject from '@ember/object';
 
 export function initialize(application) {
@@ -114,7 +114,7 @@ Once a factory is registered, it can be "injected" where it is needed.
 
 Factories can be injected into whole "types" of factories with *type injections*. For example:
 
-```app/initializers/logger.js
+```javascript {data-filename=app/initializers/logger.js}
 import EmberObject from '@ember/object';
 
 export function initialize(application) {
@@ -140,7 +140,7 @@ The value of `logger` will come from the factory named `logger:main`.
 
 Routes in this example application can now access the injected logger:
 
-```app/routes/index.js
+```javascript {data-filename=app/routes/index.js}
 import Route from '@ember/routing/route';
 
 export default Route.extend({
@@ -170,7 +170,7 @@ and services (via `import { inject } from '@ember/service';`).
 
 The following code injects the `shopping-cart` service on the `cart-contents` component as the property `cart`:
 
-```app/components/cart-contents.js
+```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 
@@ -182,7 +182,7 @@ export default Component.extend({
 If you'd like to inject a service with the same name as the property,
 simply leave off the service name (the dasherized version of the name will be used):
 
-```app/components/cart-contents.js
+```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 
@@ -210,7 +210,7 @@ instance.
 Instance initializers receive an application instance as an argument, providing
 an opportunity to look up an instance of a registered factory.
 
-```app/instance-initializers/logger.js
+```javascript {data-filename=app/instance-initializers/logger.js}
 export function initialize(applicationInstance) {
   let logger = applicationInstance.lookup('logger:main');
 
@@ -233,7 +233,7 @@ instance at runtime.
 For example, this component plays songs with different audio services based
 on a song's `audioType`.
 
-```app/components/play-audio.js
+```javascript {data-filename=app/components/play-audio.js}
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { getOwner } from '@ember/application';

guides/v3.1.0/applications/initializers.md

@@ -28,7 +28,7 @@ ember generate initializer shopping-cart
 
 Let's customize the `shopping-cart` initializer to inject a `cart` property into all the routes in your application:
 
-```app/initializers/shopping-cart.js
+```javascript {data-filename=app/initializers/shopping-cart.js}
 export function initialize(application) {
   application.inject('route', 'cart', 'service:shopping-cart');
 };
@@ -48,7 +48,7 @@ ember generate instance-initializer logger
 
 Let's add some simple logging to indicate that the instance has booted:
 
-```app/instance-initializers/logger.js
+```javascript {data-filename=app/instance-initializers/logger.js}
 export function initialize(applicationInstance) {
   let logger = applicationInstance.lookup('logger:main');
   logger.log('Hello from the instance initializer!');
@@ -63,7 +63,7 @@ export default {
 
 If you'd like to control the order in which initializers run, you can use the `before` and/or `after` options:
 
-```app/initializers/config-reader.js
+```javascript {data-filename=app/initializers/config-reader.js}
 export function initialize(application) {
   // ... your code ...
 };
@@ -74,7 +74,7 @@ export default {
 };
 ```
 
-```app/initializers/websocket-init.js
+```javascript {data-filename=app/initializers/websocket-init.js}
 export function initialize(application) {
   // ... your code ...
 };
@@ -85,7 +85,7 @@ export default {
 };
 ```
 
-```app/initializers/asset-init.js
+```javascript {data-filename=app/initializers/asset-init.js}
 export function initialize(application) {
   // ... your code ...
 };
@@ -103,7 +103,7 @@ Application initializers will always run before application instance initializer
 
 By default initializer names are derived from their module name. This initializer will be given the name `logger`:
 
-```app/instance-initializers/logger.js
+```javascript {data-filename=app/instance-initializers/logger.js}
 export function initialize(applicationInstance) {
   let logger = applicationInstance.lookup('logger:main');
   logger.log('Hello from the instance initializer!');
@@ -114,7 +114,7 @@ export default { initialize };
 
 If you want to change the name you can simply rename the file, but if needed you can also specify the name explicitly:
 
-```app/instance-initializers/logger.js
+```javascript {data-filename=app/instance-initializers/logger.js}
 export function initialize(applicationInstance) {
   let logger = applicationInstance.lookup('logger:main');
   logger.log('Hello from the instance initializer!');

guides/v3.1.0/applications/services.md

@@ -22,7 +22,7 @@ ember generate service shopping-cart
 
 Services must extend the [`Service`](https://www.emberjs.com/api/ember/release/modules/@ember%2Fservice) base class:
 
-```app/services/shopping-cart.js
+```javascript {data-filename=app/services/shopping-cart.js}
 import Service from '@ember/service';
 
 export default Service.extend({
@@ -32,7 +32,7 @@ export default Service.extend({
 Like any Ember object, a service is initialized and can have properties and methods of its own.
 Below, the shopping cart service manages an items array that represents the items currently in the shopping cart.
 
-```app/services/shopping-cart.js
+```javascript {data-filename=app/services/shopping-cart.js}
 import Service from '@ember/service';
 
 export default Service.extend({
@@ -66,7 +66,7 @@ You can either invoke it with no arguments, or you can pass it the registered na
 When no arguments are passed, the service is loaded based on the name of the variable key.
 You can load the shopping cart service with no arguments like below.
 
-```app/components/cart-contents.js
+```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 
@@ -78,7 +78,7 @@ export default Component.extend({
 
 Another way to inject a service is to provide the name of the service as the argument.
 
-```app/components/cart-contents.js
+```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 
@@ -94,7 +94,7 @@ Sometimes a service may or may not exist, like when an initializer conditionally
 Since normal injection will throw an error if the service doesn't exist,
 you must look up the service using Ember's [`getOwner`](https://emberjs.com/api/ember/release/classes/@ember%2Fapplication/methods/getOwner?anchor=getOwner) instead.
 
-```app/components/cart-contents.js
+```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { getOwner } from '@ember/application';
@@ -115,7 +115,7 @@ Once loaded, a service will persist until the application exits.
 Below we add a remove action to the `cart-contents` component.
 Notice that below we access the `cart` service with a call to`this.get`.
 
-```app/components/cart-contents.js
+```javascript {data-filename=app/components/cart-contents.js}
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 
@@ -132,7 +132,7 @@ export default Component.extend({
 Once injected into a component, a service can also be used in the template.
 Note `cart` being used below to get data from the cart.
 
-```app/templates/components/cart-contents.hbs
+```handlebars {data-filename=app/templates/components/cart-contents.hbs}
 <ul>
   {{#each cart.items as |item|}}
     <li>

guides/v3.1.0/components/block-params.md

@@ -3,11 +3,11 @@ but they can also return output to be used in a block expression.
 
 ### Return values from a component with `yield`
 
-```app/templates/index.hbs
+```handlebars {data-filename=app/templates/index.hbs}
 {{blog-post post=model}}
 ```
 
-```app/templates/components/blog-post.hbs
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 {{yield post.title post.body post.author}}
 ```
 
@@ -23,7 +23,7 @@ This allows for template customization when using a component,
 where the markup is provided by the consuming template,
 but any event handling behavior implemented in the component is retained such as `click()` handlers.
 
-```app/templates/index.hbs
+```handlebars {data-filename=app/templates/index.hbs}
 {{#blog-post post=model as |title body author|}}
   <h2>{{title}}</h2>
   <p class="author">by {{author}}</p>
@@ -38,7 +38,7 @@ The names are bound in the order that they are passed to `yield` in the componen
 It is possible to support both block and non-block usage of a component from a single component template
 using the `has-block` helper.
 
-```app/templates/components/blog-post.hbs
+```handlebars {data-filename=app/templates/components/blog-post.hbs}
 {{#if (has-block)}}
   {{yield post.title post.body post.author}}  
 {{else}}