diff --git a/src/CodeEditor.tsx b/src/CodeEditor.tsx
index b536bb20..c5ec4a5d 100644
--- a/src/CodeEditor.tsx
+++ b/src/CodeEditor.tsx
@@ -13,6 +13,42 @@ export interface ICodeEditorProps {
onChange?: (code: string) => any;
}
+const defaultSupport = {
+ css: 'CSS',
+ javascript: 'JavaScript',
+ markup: 'Markup',
+ clike: 'C-like',
+};
+
+const optionalSupport = {
+ // cpp: 'C++',
+ // csharp: 'C#',
+ // go: 'Go',
+ // html: 'HTML',
+ // http: 'HTTP',
+ // java: 'Java',
+ // json: 'JSON',
+ // jsx: 'JSX',
+ // markdown: 'Markdown',
+ // objectivec: 'Objective-C',
+ // perl: 'Perl',
+ // php: 'PHP',
+ // python: 'Python',
+ // ruby: 'Ruby',
+ // scala: 'Scala',
+ // bash: 'Bash',
+ // swift: 'Swift',
+ // yaml: 'YAML',
+};
+
+/**
+ * List of supported languages: https://prismjs.com/#languages-list
+ */
+export const supportedLanguages = {
+ ...defaultSupport,
+ ...optionalSupport,
+};
+
const CodeEditorView = (props: ICodeEditorProps & { className: string }) => {
const { className, language, onChange = noop, value } = props;
diff --git a/src/__stories__/CodeEditor.tsx b/src/__stories__/CodeEditor.tsx
index a28899b8..214fb72f 100644
--- a/src/__stories__/CodeEditor.tsx
+++ b/src/__stories__/CodeEditor.tsx
@@ -14,7 +14,7 @@ const store = new Store({
export const codeEditorKnobs = (tabName = 'Code Editor') => {
return {
- language: text('language', 'js', tabName),
+ language: text('language', 'javascript', tabName),
value: text('value', 'const defaultValue = stoplight.io();', tabName),
style: object('style', { fontSize: '12px' }, tabName),
};
@@ -22,9 +22,7 @@ export const codeEditorKnobs = (tabName = 'Code Editor') => {
storiesOf('CodeEditor', module)
.addDecorator(withKnobs)
- .add('with defaults', () => (
-
- ))
+ .add('with defaults', () => )
.addDecorator(StateDecorator(store))
.add('with store', () => (
store.set({ value })} />
diff --git a/src/utils/highlightCode.ts b/src/utils/highlightCode.ts
index 51b94a22..a9148709 100644
--- a/src/utils/highlightCode.ts
+++ b/src/utils/highlightCode.ts
@@ -1,5 +1,6 @@
import { highlight, languages } from 'prismjs';
export const highlightCode = (code: string, language: string) => {
- return highlight(code, languages[language]);
+ const langDef = languages[language];
+ return langDef ? highlight(code, langDef) : code;
};