From a13b7ed39b2f248a5f061f81e7382da8d808d717 Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Mon, 7 Jan 2019 16:50:04 +0800 Subject: [PATCH] Add inline code syntax highlighting with `code`{.lang}` --- asset/css/markbind.css | 7 +++++++ docs/userGuide/markBindSyntax.md | 13 +++++++++++++ package-lock.json | 5 +++++ package.json | 1 + src/lib/markbind/package-lock.json | 5 +++++ src/lib/markbind/package.json | 1 + src/lib/markbind/src/lib/markdown-it/index.js | 18 ++++++++++++++++++ .../expected/markbind/css/markbind.css | 7 +++++++ 8 files changed, 57 insertions(+) diff --git a/asset/css/markbind.css b/asset/css/markbind.css index 9042f850f0..172b0374c4 100644 --- a/asset/css/markbind.css +++ b/asset/css/markbind.css @@ -37,6 +37,13 @@ pre > code.hljs { color: #555; } +code.hljs.inline { + background: #f8f8f8; + color: #333; + display: initial; + padding: 0px; +} + .markbind-table { width: auto; } diff --git a/docs/userGuide/markBindSyntax.md b/docs/userGuide/markBindSyntax.md index c0e3063ee6..9a482e9600 100644 --- a/docs/userGuide/markBindSyntax.md +++ b/docs/userGuide/markBindSyntax.md @@ -248,6 +248,19 @@ MarkBind adds several Markdown-like features on top of GFMD. - (X) Option 2 (selected) +#### Inline code / syntax highlighting + +
+ +{{ icon_example }} You can syntax highlight inline code by using `{.language}`: +```markdown +Consider the Java method signature: `public static void main(String[] args)`{.java}. +``` +{{ icon_arrow_down }} + +Consider the Java method signature: `public static void main(String[] args)`{.java}. +
+ #### Media Embeds **There are easy ways to embed media content such as YouTube videos and PowerPoint slides**. diff --git a/package-lock.json b/package-lock.json index e7392a5cee..a81973c33a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5298,6 +5298,11 @@ "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.0.0.tgz", "integrity": "sha512-s3HuwE4KN+4N8gL8nLxMdPO+OXik7oJvqPgQoQNPhYMM4c0iI72n9XqNXG/bxQa8D+aU4Is2fcioryGRQ4QoLw==" }, + "markdown-it-attrs": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-2.3.2.tgz", + "integrity": "sha512-DyatNvpatg7w+fGkplWGeie7o/0TogBr2w0izyz9ZQfTMv5G3lbDHQFQ42aP2e5L2mJQt0IeAjWzvYaa2d9xzQ==" + }, "markdown-it-emoji": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz", diff --git a/package.json b/package.json index bef521269a..75178d45f1 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "lodash": "^4.17.5", "markdown-it": "^8.3.0", "markdown-it-anchor": "^5.0.0", + "markdown-it-attrs": "^2.3.2", "markdown-it-emoji": "^1.3.0", "markdown-it-imsize": "^2.0.1", "markdown-it-ins": "^2.0.0", diff --git a/src/lib/markbind/package-lock.json b/src/lib/markbind/package-lock.json index 580d5a700b..5773547fcc 100644 --- a/src/lib/markbind/package-lock.json +++ b/src/lib/markbind/package-lock.json @@ -2305,6 +2305,11 @@ "string": "3.3.3" } }, + "markdown-it-attrs": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-2.3.2.tgz", + "integrity": "sha512-DyatNvpatg7w+fGkplWGeie7o/0TogBr2w0izyz9ZQfTMv5G3lbDHQFQ42aP2e5L2mJQt0IeAjWzvYaa2d9xzQ==" + }, "markdown-it-emoji": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz", diff --git a/src/lib/markbind/package.json b/src/lib/markbind/package.json index 20bf37aa7f..f4690c298a 100644 --- a/src/lib/markbind/package.json +++ b/src/lib/markbind/package.json @@ -21,6 +21,7 @@ "lodash": "^4.17.5", "markdown-it": "^8.3.0", "markdown-it-anchor": "^4.0.0", + "markdown-it-attrs": "^2.3.2", "markdown-it-emoji": "^1.3.0", "markdown-it-imsize": "^2.0.1", "markdown-it-ins": "^2.0.0", diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js index 74ab0f8f66..f98ac286d1 100644 --- a/src/lib/markbind/src/lib/markdown-it/index.js +++ b/src/lib/markbind/src/lib/markdown-it/index.js @@ -24,6 +24,7 @@ markdownIt.use(require('markdown-it-mark')) .use(require('markdown-it-table-of-contents')) .use(require('markdown-it-task-lists'), {enabled: true}) .use(require('markdown-it-linkify-images'), {imgClass: 'img-fluid'}) + .use(require('markdown-it-attrs')) .use(require('./markdown-it-dimmed')) .use(require('./markdown-it-radio-button')) .use(require('./markdown-it-block-embed')); @@ -39,6 +40,23 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => { return ''; }; +// highlight inline code +markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => { + const token = tokens[idx]; + const lang = token.attrGet('class'); + + if (lang && hljs.getLanguage(lang)) { + token.attrSet('class', `hljs inline ${lang}`); + return '' + + hljs.highlight(lang, token.content, true).value + + ''; + } else { + return '' + + markdownIt.utils.escapeHtml(token.content) + + ''; + } +}; + // fix emoji numbers const emojiData = require('markdown-it-emoji/lib/data/full.json'); // Extend emoji here diff --git a/test/test_site/expected/markbind/css/markbind.css b/test/test_site/expected/markbind/css/markbind.css index 9042f850f0..172b0374c4 100644 --- a/test/test_site/expected/markbind/css/markbind.css +++ b/test/test_site/expected/markbind/css/markbind.css @@ -37,6 +37,13 @@ pre > code.hljs { color: #555; } +code.hljs.inline { + background: #f8f8f8; + color: #333; + display: initial; + padding: 0px; +} + .markbind-table { width: auto; }