Medium とかいい記事がたくさんなのですが。
コードが見づらいときありません?
ブックマークレットで「ハイライト」します。
(() => {
const version = '11.5.0';
const theme = 'github-dark-dimmed';
const prefix = `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${version}`;
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', `${prefix}/styles/${theme}.min.css`);
document.getElementsByTagName('head')[0].appendChild(link);
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', `${prefix}/highlight.min.js`);
document.getElementsByTagName('head')[0].appendChild(script);
script.addEventListener('load', function() {
document.querySelectorAll('pre').forEach((pre) => {
pre.style.fontFamily = 'Courier, Menlo, Consolas, Monaco, monospace';
pre.style.overflowX = 'scroll';
pre.style.whiteSpace = 'pre';
// replace medium style <br/> to LF
pre.innerHTML = pre.innerHTML.replaceAll(/<\s*\/?br\s*[\/]?>/gi, "\n")
if (!pre.querySelector('code')) {
window.hljs.highlightBlock(pre);
} else {
window.hljs.highlightBlock(pre.querySelectorAll('code')[0]);
}
});
});
})();
以下リンクをブックマークバーへドラッグしてどうぞ。
highlight-code-snippets
👉 Google「Closure Compiler」 (クロージャコンパイラ) の使い方