build(aio): convert triple backtick blocks to code-example tags

Closes #16246

aio/content/marketing/test.html

@@ -85,6 +85,17 @@
   </hero-details>
 </code-example>
 
+## Backticked code blocks
+
+```html
+  <hero-details>
+    <h2>Mister Fantastic</h2>
+    <hero-team>
+      <h3>Losing Team</h3>
+    </hero-team>
+  </hero-details>
+```
+
 <h2>&lt;live-example&gt;</h2>
 
 <p>Plain live-example</p>

aio/tools/transforms/remark-package/services/handlers/code.js

@@ -0,0 +1,14 @@
+/**
+ * Render markdown code blocks as `<code-example>` tags
+ */
+module.exports = function code(h, node) {
+  var value = node.value ? ('\n' + node.value + '\n') : '';
+  var lang = node.lang && node.lang.match(/^[^ \t]+(?=[ \t]|$)/);
+  var props = {};
+
+  if (lang) {
+    props.language = lang;
+  }
+
+  return h(node, 'code-example', props, [{ type: 'text', value }]);
+};

aio/tools/transforms/remark-package/services/renderMarkdown.js

@@ -1,5 +1,6 @@
 const remark = require('remark');
 const html = require('remark-html');
+const code = require('./handlers/code');
 
 /**
  * @dgService renderMarkdown
@@ -7,6 +8,7 @@ const html = require('remark-html');
  * Render the markdown in the given string as HTML.
  */
 module.exports = function renderMarkdown() {
+  const handlers = { code };
   const renderer = remark()
                     .use(inlineTagDefs)
                     .use(noIndentedCodeBlocks)
@@ -15,7 +17,7 @@ module.exports = function renderMarkdown() {
                     // .use(() => tree => {
                     //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
                     // })
-                    .use(html);
+                    .use(html, { handlers });
 
   return function renderMarkdownImpl(content) {
     return renderer.processSync(content).toString();

aio/tools/transforms/remark-package/services/renderMarkdown.spec.js

@@ -67,4 +67,21 @@ describe('remark: renderMarkdown service', () => {
     const output = renderMarkdown(content);
     expect(output).toEqual('<p>some text</p>\n<p>    indented text</p>\n<p>other text</p>\n');
   });
+
+  it('should format triple backtick code blocks as `code-example` tags', () => {
+    const content =
+    '```ts\n' +
+    '  class MyClass {\n' +
+    '    method1() { ... }\n' +
+    '  }\n' +
+    '```';
+    const output = renderMarkdown(content);
+    expect(output).toEqual(
+    '<code-example language="ts">\n' +
+    '  class MyClass {\n' +
+    '    method1() { ... }\n' +
+    '  }\n' +
+    '</code-example>\n'
+    );
+  });
 });