build(aio): convert triple backtick blocks to `code-example` tags
Closes #16246
This commit is contained in:
parent
24b9067047
commit
f32bfcdbe5
|
@ -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><live-example></h2>
|
||||
|
||||
<p>Plain live-example</p>
|
||||
|
|
|
@ -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 }]);
|
||||
};
|
|
@ -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();
|
||||
|
|
|
@ -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'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue