@codedoc/core/dist/es6/components/code/index.js

Create beautiful modern documentation websites.

import chalk from 'chalk';
import { highlight, languages } from 'prismjs';
const loadLanguages = /*#__PURE__*/ require('prismjs/components/');
import { CodeStyle } from './style';
import { parse } from './parse';
import { Icon } from '../misc';
import { underlineMarkerType } from './underline';
import { terminalOutput } from './term-output';
export function Code(options, renderer, content) {
    renderer = renderer.plug(this.theme.styled(CodeStyle));
    const classes = this.theme.classes(CodeStyle);
    const extopts = { wmbar: undefined, filename: undefined };
    let lang = undefined;
    let safeHighlight = false;
    let term = undefined;
    let extras;
    if (options.lang) {
        [lang, ...extras] = options.lang.split('|').map(_ => _.trim());
        if (lang === 'bash')
            term = '$';
        extras.forEach(ext => {
            if (ext === '--wmbar')
                extopts.wmbar = true;
            else if (ext === '--no-wmbar')
                extopts.wmbar = false;
            else if (ext === '--safe-highlight')
                safeHighlight = true;
            else if (ext.startsWith('--term')) {
                term = ext.split(' ').slice(1).join(' ') || '$';
            }
            else if (ext === '--no-term') {
                term = undefined;
            }
            else {
                extopts.filename = ext;
                extopts.wmbar = true;
            }
        });
    }
    if (lang) {
        if (!(lang in languages)) {
            try {
                loadLanguages([lang]);
            }
            catch (_) { }
            finally {
                if (!(lang in languages)) {
                    if (safeHighlight)
                        lang = undefined;
                    else
                        throw new Error(``
                            + chalk `\n{redBright #}`
                            + chalk `\n{redBright # Unrecognized Language::} ${lang}`
                            + chalk `\n{redBright #} Check https://prismjs.com/#supported-languages for a list of supported languages.`
                            + chalk `\n{redBright #}`
                            + chalk `\n{redBright #} You can also add --safe-highlight flag to snippets with unsupported langauges.`
                            + chalk `\n{redBright #} Check https://codedoc.cc/docs/code/overview#unsupported-languages for details.`
                            + chalk `\n{redBright #}`);
                }
            }
        }
    }
    const code$ = renderer.create("code", { class: `${lang} -codedoc-code-snippet`, tabindex: "0" },
        renderer.create("span", { class: classes.wmbar },
            renderer.create("span", null),
            renderer.create("span", null),
            renderer.create("span", null),
            renderer.create("span", null, extopts.filename || '')));
    const [code, lines, highlights, outputs] = parse(content[0], !!term);
    const highlines = lang ? highlight(code, languages[lang], lang).split('\n') : code.split('\n');
    let waving = 'none';
    lines.forEach((line, index) => {
        const highline = highlines[index];
        const counter = index + 1;
        let counter$;
        if (counter === 1 || counter === lines.length || counter % 5 === 0)
            counter$ = renderer.create("span", { class: `${classes.lineCounter} prim -codedoc-line-counter` }, counter);
        else
            counter$ = renderer.create("span", { class: `${classes.lineCounter} -codedoc-line-counter` }, counter);
        renderer.render(renderer.create("span", { class: "-codedoc-line-link" },
            renderer.create(Icon, null, "link"))).on(counter$);
        const highlighted = highlights[index];
        const line$ = renderer.create("div", { class: `${classes.line} ${highlighted} -codedoc-code-line`, "data-content": line, _innerHTML: highline });
        line$.childNodes.forEach(child => {
            var _a;
            if (child instanceof HTMLElement && child.classList.contains('comment')) {
                const _waving = underlineMarkerType(child.textContent || '');
                if (_waving === 'error' || _waving === 'warning') {
                    if (_waving === waving)
                        waving = 'none';
                    else
                        waving = _waving;
                    child.hidden = true;
                }
                return;
            }
            if (waving !== 'none') {
                let target = child;
                if (!(target instanceof HTMLElement)) {
                    target = renderer.create("span", null, child.textContent);
                    child.replaceWith(target);
                }
                target.classList.add(waving);
                renderer.render(renderer.create("span", { class: "wave" }, (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.replace(/./g, '~'))).on(target);
            }
        });
        if (line$.firstChild)
            renderer.render(counter$).before(line$.firstChild);
        else
            renderer.render(counter$).on(line$);
        if (!!term) {
            renderer.render(renderer.create("span", { class: `${classes.termPrefix} -codedoc-code-term-prefix` }, term)).after(counter$);
        }
        renderer.render(line$).on(code$);
        renderer.render(renderer.create("br", null)).on(code$);
        if (!!term && outputs[index]) {
            renderer.render(renderer.create("span", { class: `${classes.termOutput} -codedoc-code-term-output`, _innerHTML: terminalOutput(...outputs[index]) })).on(code$);
        }
    });
    const wmbar = lines.length > 1 && (this.theme.theme.code.wmbar || extopts.wmbar) && extopts.wmbar !== false;
    return renderer.create("pre", { class: wmbar ? 'with-bar' : '' }, code$);
}
export { CodeStyle } from './style';
//# sourceMappingURL=index.js.map