Change Theme/Style

[zurnet]

Is there a way to change theme/style?

zurnet,

I had this same question so I looked into how I might accomplish it. Here's what I came up with.

It looks like ember-code-snippet includes its own highlight-style.css file. This means it gets included in the project's generated vendor.css file. Keep that in mind...

I found this project, ember-cli-node-assets, which lets you include assets from node_modules of your project. At first I tried "importing" a stylesheet from the node_modules/highlight.js/styles/ like this:

    nodeAssets: {
      'highlight.js': {
        import: ['styles/monokai.css']
      }
    }

However, that includes the styles in vendor.css and the ember-code-snippet styles override the highlight.js styles, which were included in vendor.css first. So I went the "public" direction:

    nodeAssets: {
      'highlight.js': {
        public: ['styles/monokai.css']
      }
    }

• (There are many stylesheet files included with highlight.js.)

This puts the monokai.css file into dist/assets/styles/. I then used a link tag in the HTML head section after vendor.css like this:

    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <link rel="stylesheet" href="{{rootURL}}assets/styles/monokai.css">

It would be really nice if ember-code-snippet could provide a configuration option to let you include stylesheet files from highlight.js, but this technique does work.

tr