Syntax highlight.zh

您可以使用PrismJS轻松高亮您Glorious Demo的代码。

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();

指定语言 的Highlight

要高亮，除HTML,CSS要么Javascript以外的任何语言,确保包括其各自的Prism包:

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 语言指定包

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();

指定主题 highlight

Prism为您提供一些优秀的主题.要使用其中一个,您需要做的就是包含主题的CSS:

import 'prismjs/themes/prism-dark.css'; // 一些其他的主题
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();

通过 CDN 使用 Prism

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

<!-- Prism 语言指定 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-ruby.js"></script>

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