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; };