new description list rendering
This commit is contained in:
parent
873aefcc6c
commit
21dbcad44f
@ -1,64 +0,0 @@
|
|||||||
|
|
||||||
import { marked } from 'marked';
|
|
||||||
import { ParsedAttributes, parse_attributes } from './attrs';
|
|
||||||
import { MarkdownOptions } from './render';
|
|
||||||
|
|
||||||
// todo: deprecate this
|
|
||||||
|
|
||||||
export interface BreadcrumbNavToken extends marked.Tokens.Generic {
|
|
||||||
text: string;
|
|
||||||
attrs: ParsedAttributes;
|
|
||||||
items: marked.Token[][];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function breadcrumb_nav_ext(renderer: marked.Renderer, opts: MarkdownOptions) : marked.TokenizerExtension & marked.RendererExtension {
|
|
||||||
return {
|
|
||||||
name: 'breadcrumb_nav',
|
|
||||||
level: 'block',
|
|
||||||
start: (src) => src.match(/^\/\/\//)?.index,
|
|
||||||
tokenizer(src, tokens) {
|
|
||||||
const rule = /^\/\/\/(\/*)([^\n]+)?(?:\n)((?:[^\/]|\/\/?(?!\/\1))+)\/\/\/\1/;
|
|
||||||
const match = rule.exec(src);
|
|
||||||
|
|
||||||
if (match) {
|
|
||||||
const token: BreadcrumbNavToken = {
|
|
||||||
type: 'breadcrumb_nav',
|
|
||||||
raw: match[0],
|
|
||||||
text: match[3],
|
|
||||||
attrs: parse_attributes(match[2] || ''),
|
|
||||||
tokens: [ ],
|
|
||||||
items: [ ],
|
|
||||||
};
|
|
||||||
|
|
||||||
const lines = match[3].trim().split('\n');
|
|
||||||
|
|
||||||
for (const line of lines) {
|
|
||||||
const tokens = this.lexer.inlineTokens(line, [ ]);
|
|
||||||
token.tokens.push(...tokens);
|
|
||||||
token.items.push(tokens);
|
|
||||||
}
|
|
||||||
|
|
||||||
return token;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderer(token: BreadcrumbNavToken) {
|
|
||||||
return `<nav aria-label="breadcrumbs" ${token.attrs.html_attrs.join(' ')}>\n`
|
|
||||||
+ `\t<ol>\n`
|
|
||||||
+ '\t\t'
|
|
||||||
+ token.items.map((tokens, index) =>{
|
|
||||||
let item = '<li>\n';
|
|
||||||
|
|
||||||
if (index) {
|
|
||||||
item += '\t\t\t<span class="separator" aria-hidden="true">/</span>\n';
|
|
||||||
}
|
|
||||||
|
|
||||||
item += `\t\t\t${this.parser.parseInline(tokens, renderer)}\n`;
|
|
||||||
|
|
||||||
return item + '\t\t</li>';
|
|
||||||
}).join('\n\t\t')
|
|
||||||
+ '\n'
|
|
||||||
+ `\t</ol>\n`
|
|
||||||
+ `</nav>`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
@ -3,14 +3,19 @@ import { marked } from 'marked';
|
|||||||
import { MarkdownOptions } from './render';
|
import { MarkdownOptions } from './render';
|
||||||
|
|
||||||
export interface DescriptionListToken extends marked.Tokens.Generic {
|
export interface DescriptionListToken extends marked.Tokens.Generic {
|
||||||
|
type: 'description_list';
|
||||||
items: (DescriptionTermToken | DescriptionDetailToken)[];
|
items: (DescriptionTermToken | DescriptionDetailToken)[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type DescriptionElemToken = DescriptionTermToken | DescriptionDetailToken;
|
||||||
|
|
||||||
export interface DescriptionTermToken extends marked.Tokens.Generic {
|
export interface DescriptionTermToken extends marked.Tokens.Generic {
|
||||||
|
type: 'description_term';
|
||||||
text: string;
|
text: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DescriptionDetailToken extends marked.Tokens.Generic {
|
export interface DescriptionDetailToken extends marked.Tokens.Generic {
|
||||||
|
type: 'description_detail';
|
||||||
text: string;
|
text: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -18,72 +23,107 @@ export function description_list_ext(renderer: marked.Renderer, opts: MarkdownOp
|
|||||||
return {
|
return {
|
||||||
name: 'description_list',
|
name: 'description_list',
|
||||||
level: 'block',
|
level: 'block',
|
||||||
start: (src) => src.match(/^:[:#-]/)?.index,
|
start: (src) => src.match(/^: /)?.index,
|
||||||
tokenizer(src, tokens) {
|
tokenizer(src, tokens) {
|
||||||
const rule = /^(?::[:#-](?:\s[^\n]*)?(?:\n|$))+/;
|
const start = src.match(/^: /)?.index;
|
||||||
const match = rule.exec(src);
|
const lines = src.slice(start).split(/\n/g);
|
||||||
|
const token: DescriptionListToken = {
|
||||||
|
type: 'description_list',
|
||||||
|
raw: '',
|
||||||
|
items: [ ]
|
||||||
|
};
|
||||||
|
|
||||||
if (match) {
|
let current: DescriptionElemToken;
|
||||||
const token: DescriptionListToken = {
|
const render_current = () => {
|
||||||
type: 'description_list',
|
if (current) {
|
||||||
raw: match[0],
|
this.lexer.blockTokens(current.text, current.tokens);
|
||||||
items: [ ]
|
current = null;
|
||||||
};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const items = token.raw.trim().split('\n');
|
for (const line of lines) {
|
||||||
const raw_buffer: string[] = [ ];
|
// Skip empty lines
|
||||||
const text_buffer: string[] = [ ];
|
if (! line.trim()) {
|
||||||
|
token.raw += line + '\n';
|
||||||
|
|
||||||
const flush_buffer = () => {
|
if (current) {
|
||||||
if (! raw_buffer.length) {
|
current.raw += line + '\n';
|
||||||
return;
|
current.text += '\n';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grab the second character from the first line to determine the
|
continue;
|
||||||
// token type (should be "#" or "-")
|
|
||||||
const type = raw_buffer[0][1] === '#' ? 'description_term' : 'description_detail';
|
|
||||||
|
|
||||||
const sub_token: (DescriptionTermToken | DescriptionDetailToken) = {
|
|
||||||
type,
|
|
||||||
raw: raw_buffer.join('\n'),
|
|
||||||
text: text_buffer.join('\n'),
|
|
||||||
tokens: [ ],
|
|
||||||
};
|
|
||||||
|
|
||||||
raw_buffer.length = 0;
|
|
||||||
text_buffer.length = 0;
|
|
||||||
|
|
||||||
this.lexer.blockTokens(sub_token.text, sub_token.tokens);
|
|
||||||
token.items.push(sub_token);
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const line of items) {
|
|
||||||
const rule = /^:([:#-])(?:\s([^\n]*))?(?:\n|$)/;
|
|
||||||
const match = rule.exec(line);
|
|
||||||
|
|
||||||
if (match) {
|
|
||||||
if (match[1] !== ':') {
|
|
||||||
flush_buffer();
|
|
||||||
}
|
|
||||||
|
|
||||||
raw_buffer.push(match[0]);
|
|
||||||
text_buffer.push(match[2]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
flush_buffer();
|
// If the line starts immediately with a colon, it is a <dt>
|
||||||
|
if (line.startsWith(': ')) {
|
||||||
|
render_current();
|
||||||
|
token.raw += line + '\n';
|
||||||
|
token.items.push(
|
||||||
|
current = {
|
||||||
|
type: 'description_term',
|
||||||
|
raw: line,
|
||||||
|
text: line.slice(2),
|
||||||
|
tokens: [ ],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the line starts with a colon after an indent, it is a <dd>
|
||||||
|
if (line.startsWith(' : ')) {
|
||||||
|
render_current();
|
||||||
|
token.raw += line + '\n';
|
||||||
|
token.items.push(
|
||||||
|
current = {
|
||||||
|
type: 'description_detail',
|
||||||
|
raw: line,
|
||||||
|
text: line.slice(4),
|
||||||
|
tokens: [ ],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the line starts with (at least) two indents, it is a child
|
||||||
|
// of the current element
|
||||||
|
if (line.startsWith(' ')) {
|
||||||
|
token.raw += line + '\n';
|
||||||
|
current.raw += '\n' + line;
|
||||||
|
current.text += '\n' + line.slice(current.type === 'description_term' ? 2 : 4);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the line starts with one indent, it is a child of the current
|
||||||
|
// <dt> (but is not allowed after a <dd>)
|
||||||
|
if (line.startsWith(' ')) {
|
||||||
|
if (current.type !== 'description_term') {
|
||||||
|
render_current();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
token.raw += line + '\n';
|
||||||
|
current.raw += '\n' + line;
|
||||||
|
current.text += '\n' + line.slice(2);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the line starts any other way, it is the start of new content
|
||||||
|
// and we are done parsing
|
||||||
|
render_current();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
render_current();
|
||||||
|
|
||||||
|
if (token.items.length) {
|
||||||
|
console.log(token);
|
||||||
return token;
|
return token;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
renderer(token: DescriptionListToken) {
|
renderer(token: DescriptionListToken) {
|
||||||
const items = token.items.map((item) => {
|
const items = token.items.map((item) => {
|
||||||
const tag = item.type === 'description_term' ? 'dt' : 'dd';
|
const tag = item.type === 'description_term' ? 'dt' : 'dd';
|
||||||
return `
|
return `<${tag}>${this.parser.parse(item.tokens)}</${tag}>`;
|
||||||
<${tag}>
|
|
||||||
${this.parser.parse(item.tokens)}
|
|
||||||
</${tag}>
|
|
||||||
`;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return `<dl>${items.join('')}</dl>`;
|
return `<dl>${items.join('')}</dl>`;
|
||||||
|
@ -9,7 +9,6 @@ import { katex_block_ext, katex_inline_ext } from './katex';
|
|||||||
import { footnote_list_ext, footnote_ref_ext } from './footnotes';
|
import { footnote_list_ext, footnote_ref_ext } from './footnotes';
|
||||||
import { description_list_ext } from './description-list';
|
import { description_list_ext } from './description-list';
|
||||||
import { resolve_async_bindings } from './async-steps';
|
import { resolve_async_bindings } from './async-steps';
|
||||||
import { breadcrumb_nav_ext } from './breadcrumb-nav';
|
|
||||||
import { base_url_walk_tokens } from './base-url';
|
import { base_url_walk_tokens } from './base-url';
|
||||||
|
|
||||||
export interface MarkdownOptions {
|
export interface MarkdownOptions {
|
||||||
@ -65,7 +64,6 @@ function setup_marked(options: MarkdownOptions, marked_options: marked.MarkedOpt
|
|||||||
description_list_ext(marked_options.renderer, options),
|
description_list_ext(marked_options.renderer, options),
|
||||||
section_ext(marked_options.renderer, options),
|
section_ext(marked_options.renderer, options),
|
||||||
icon_ext(marked_options.renderer, options),
|
icon_ext(marked_options.renderer, options),
|
||||||
breadcrumb_nav_ext(marked_options.renderer, options),
|
|
||||||
...(options.extensions || [ ]).map((ext) => {
|
...(options.extensions || [ ]).map((ext) => {
|
||||||
return ext(marked_options.renderer, options);
|
return ext(marked_options.renderer, options);
|
||||||
}),
|
}),
|
||||||
|
@ -152,6 +152,10 @@ function code(renderer: marked.Renderer, opts: MarkdownOptions) {
|
|||||||
const binding = bind_data_async(promise);
|
const binding = bind_data_async(promise);
|
||||||
return figure(binding);
|
return figure(binding);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
case 'yaml:calendar': {
|
||||||
|
// todo
|
||||||
|
};
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return figure(`<pre class="language-${args[0] || 'txt'}">${render_prism(code, args[0])}</pre>`);
|
return figure(`<pre class="language-${args[0] || 'txt'}">${render_prism(code, args[0])}</pre>`);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user