Add inline code syntax highlighting with code{.lang}

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

docs/userGuide/markBindSyntax.md

@@ -248,6 +248,19 @@ MarkBind adds several Markdown-like features on top of GFMD.
 - (X) Option 2 (selected)
 </div>
 
+#### Inline code / syntax highlighting
+
+<div class="indented">
+
+{{ 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}.
+</div>
+
 #### Media Embeds
 
 **There are easy ways to embed media content such as YouTube videos and PowerPoint slides**.

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",

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",

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 '</table></div>';
 };
 
+// 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 '<code' + slf.renderAttrs(token) + '>'
+      + hljs.highlight(lang, token.content, true).value
+      + '</code>';
+  } else {
+    return '<code' + slf.renderAttrs(token) + '>'
+      + markdownIt.utils.escapeHtml(token.content)
+      + '</code>';
+  }
+};
+
 // fix emoji numbers
 const emojiData = require('markdown-it-emoji/lib/data/full.json');
 // Extend emoji here

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