From a7640738485a9e753aa2920fad8c5ba248ed439e Mon Sep 17 00:00:00 2001 From: Adam Lancaster Date: Sat, 4 Dec 2021 14:02:53 +0000 Subject: [PATCH] Allow for XML syntax highlighting in markdown cells (#743) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update webpack.config.js Allows for xml syntax highlighting in markdown cells * Extend theme to cover XML and JSON specific tokens * Refactor theme colors into a single palette Co-authored-by: Jonatan KÅ‚osko --- assets/js/cell/live_editor/theme.js | 66 +++++++++++++++++++---------- assets/webpack.config.js | 2 +- 2 files changed, 45 insertions(+), 23 deletions(-) diff --git a/assets/js/cell/live_editor/theme.js b/assets/js/cell/live_editor/theme.js index 2105e499d..4fd6bda2e 100644 --- a/assets/js/cell/live_editor/theme.js +++ b/assets/js/cell/live_editor/theme.js @@ -1,39 +1,61 @@ // This is a port of the One Dark theme to the Monaco editor. +const colors = { + default: "#abb2bf", + lightRed: "#e06c75", + blue: "#61afef", + gray: "#5c6370", + green: "#98c379", + purple: "#c678dd", + red: "#be5046", + teal: "#56b6c2", + peach: "#d19a66", +}; + const theme = { base: "vs-dark", inherit: false, rules: [ - { token: "", foreground: "#abb2bf" }, - { token: "variable", foreground: "#e06c75" }, - { token: "constant", foreground: "#61afef" }, - { token: "constant.character.escape", foreground: "#61afef" }, - { token: "comment", foreground: "#5c6370" }, - { token: "number", foreground: "#61afef" }, - { token: "regexp", foreground: "#e06c75" }, - { token: "type", foreground: "#e06c75" }, - { token: "string", foreground: "#98c379" }, - { token: "keyword", foreground: "#c678dd" }, - { token: "operator", foreground: "#d19a66" }, - { token: "delimiter.bracket.embed", foreground: "#be5046" }, - { token: "sigil", foreground: "#56b6c2" }, - { token: "function", foreground: "#61afef" }, - { token: "function.call", foreground: "#abb2bf" }, + { token: "", foreground: colors.default }, + { token: "variable", foreground: colors.lightRed }, + { token: "constant", foreground: colors.blue }, + { token: "constant.character.escape", foreground: colors.blue }, + { token: "comment", foreground: colors.gray }, + { token: "number", foreground: colors.blue }, + { token: "regexp", foreground: colors.lightRed }, + { token: "type", foreground: colors.lightRed }, + { token: "string", foreground: colors.green }, + { token: "keyword", foreground: colors.purple }, + { token: "operator", foreground: colors.peach }, + { token: "delimiter.bracket.embed", foreground: colors.red }, + { token: "sigil", foreground: colors.teal }, + { token: "function", foreground: colors.blue }, + { token: "function.call", foreground: colors.default }, // Markdown specific { token: "emphasis", fontStyle: "italic" }, { token: "strong", fontStyle: "bold" }, - { token: "keyword.md", foreground: "#e06c75" }, - { token: "keyword.table", foreground: "#e06c75" }, - { token: "string.link.md", foreground: "#61afef" }, - { token: "variable.md", foreground: "#56b6c2" }, - { token: "string.md", foreground: "#abb2bf" }, - { token: "variable.source.md", foreground: "#abb2bf" }, + { token: "keyword.md", foreground: colors.lightRed }, + { token: "keyword.table", foreground: colors.lightRed }, + { token: "string.link.md", foreground: colors.blue }, + { token: "variable.md", foreground: colors.teal }, + { token: "string.md", foreground: colors.default }, + { token: "variable.source.md", foreground: colors.default }, + + // XML specific + { token: "tag", foreground: colors.lightRed }, + { token: "metatag", foreground: colors.lightRed }, + { token: "attribute.name", foreground: colors.peach }, + { token: "attribute.value", foreground: colors.green }, + + // JSON specific + { token: "string.key", foreground: colors.lightRed }, + { token: "keyword.json", foreground: colors.blue }, ], colors: { "editor.background": "#282c34", - "editor.foreground": "#abb2bf", + "editor.foreground": colors.default, "editorLineNumber.foreground": "#636d83", "editorCursor.foreground": "#636d83", "editor.selectionBackground": "#3e4451", diff --git a/assets/webpack.config.js b/assets/webpack.config.js index 813e94ba6..5bb1f6a0a 100644 --- a/assets/webpack.config.js +++ b/assets/webpack.config.js @@ -51,7 +51,7 @@ module.exports = (env, options) => { }), new MiniCssExtractPlugin({ filename: "../css/app.css" }), new MonacoWebpackPlugin({ - languages: ["markdown", "elixir"], + languages: ["markdown", "elixir", "xml", "json"], }), ], optimization: {