98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
/* eslint-disable import/no-unresolved */
|
|
const prism = require('prismjs');
|
|
const loadLanguages = require('prismjs/components/index');
|
|
const { logger, chalk, escapeHtml } = require('@vuepress/shared-utils');
|
|
|
|
// required to make embedded highlighting work...
|
|
loadLanguages(['markup', 'css', 'javascript']);
|
|
|
|
const wrap = (code, lang) => {
|
|
if (lang === 'text') {
|
|
code = escapeHtml(code);
|
|
}
|
|
|
|
// eslint-disable-next-line max-len
|
|
return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>
|
|
<div class="codeControls">
|
|
<div class="select-type">
|
|
<button
|
|
type="button"
|
|
class="select-type-button"
|
|
@click="$parent.$parent.toggleDropdown($event)"
|
|
value="${lang}"
|
|
>
|
|
{{ $parent.$parent.selectedLang }}
|
|
</button>
|
|
<ul>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
@click="$parent.$parent.setLanguage('JavaScript')"
|
|
:class="{'select-type-js': true, 'active': ${lang.includes('js')}}"
|
|
>
|
|
JavaScript
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
@click="$parent.$parent.setLanguage('TypeScript')"
|
|
:class="{'select-type-ts': true, 'active': ${lang.includes('ts')}}"
|
|
>
|
|
TypeScript
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button @click="$parent.$parent.copyCode($event)" class="copycode" aria-label="Copy to clipboard">
|
|
<i class="ico i-copy no-pointer"></i><i class="ico i-checks no-pointer"></i>
|
|
</button>
|
|
</div>`;
|
|
};
|
|
|
|
const getLangCodeFromExtension = (extension) => {
|
|
const extensionMap = {
|
|
vue: 'markup',
|
|
html: 'markup',
|
|
md: 'markdown',
|
|
rb: 'ruby',
|
|
ts: 'typescript',
|
|
py: 'python',
|
|
sh: 'bash',
|
|
yml: 'yaml',
|
|
styl: 'stylus',
|
|
kt: 'kotlin',
|
|
rs: 'rust',
|
|
hf: 'excel-formula',
|
|
formula: 'excel-formula',
|
|
hyperformula: 'excel-formula',
|
|
};
|
|
|
|
return extensionMap[extension] || extension;
|
|
};
|
|
|
|
module.exports = (str, lang) => {
|
|
if (!lang) {
|
|
return wrap(str, 'text');
|
|
}
|
|
lang = lang.toLowerCase();
|
|
const rawLang = lang;
|
|
|
|
lang = getLangCodeFromExtension(lang);
|
|
|
|
if (!prism.languages[lang]) {
|
|
try {
|
|
loadLanguages([lang]);
|
|
} catch (e) {
|
|
logger.warn(chalk.yellow(`[vuepress] Syntax highlight for language "${lang}" is not supported.`));
|
|
}
|
|
}
|
|
if (prism.languages[lang]) {
|
|
const code = prism.highlight(str, prism.languages[lang], lang);
|
|
|
|
return wrap(code, rawLang);
|
|
}
|
|
|
|
return wrap(str, 'text');
|
|
};
|