Syntax highlight

You can easily get your code highlighted using Glorious Demo with PrismJS.

Basic Highlight

import '@glorious/demo/gdemo.min.css';
import 'prismjs/themes/prism-tomorrow.css';
import GDemo from '@glorious/demo';
import Prism from 'prismjs';

const demo = new GDemo('#container');

const code = `
function greet(){
  console.log("Hello World!");
}

greet();
`

const highlightedCode = Prism.highlight(
  code,
  Prism.languages.javascript,
  'javascript'
);

demo
  .openApp('editor', {minHeight: '350px', windowTitle: '~/gdemo.rb'})
  .write(highlightedCode)
  .end();

Language-Specific Highlight

To highlight any language other than HTML, CSS or Javascript, make sure to include its respective Prism package:

import '@glorious/demo/gdemo.min.css';
import 'prismjs/themes/prism-tomorrow.css';
import GDemo from '@glorious/demo';
import Prism from 'prismjs';
import 'prismjs/components/prism-ruby'; // Ruby language specific package

const demo = new GDemo('#container');

const code = `
def greet
  printf "Hello World!"
end

greet
`

const highlightedCode = Prism.highlight(
  code,
  Prism.languages.ruby,
  'ruby'
);

demo
  .openApp('editor', {minHeight: '350px', windowTitle: '~/gdemo.rb'})
  .write(highlightedCode)
  .end();

Theme-Specific highlight

Prism offers some excellent themes for you. To use one of them, all you need to do is to include the Theme's CSS:

import 'prismjs/themes/prism-dark.css'; // Some other Prism theme
import '@glorious/demo/gdemo.min.css';
import GDemo from '@glorious/demo';
import Prism from 'prismjs';

const demo = new GDemo('#container');

const code = `
function greet(){
  console.log("Hello World!");
}

greet();
`

const highlightedCode = Prism.highlight(
  code,
  Prism.languages.javascript,
  'javascript'
);

demo
  .openApp('editor', {minHeight: '350px', windowTitle: '~/gdemo.rb'})
  .write(highlightedCode)
  .end();

Using Prism via CDN

<!-- Prism -->
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>

<!-- Prism Language-Specific -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-ruby.js"></script>

<!-- Prism Theme-Specific -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css">