This content originally appeared on Things I've Learnt and was authored by Things I've Learnt
I wanted to check how different PrismJS themes would look on my blog, I wasn’t too happy with the workflow though, which was downloading a theme’s CSS file, pasting it in my blog’s code and waiting for the package to rebuild, so I wrote simple snippet that helps with that.
The code below will fetch existing PrismJS themes from these two repositories and will then listen for J and K key presses. Upon pressed, it will rotate through the list of fetched themes, applying them to the current page one at a time.
Here it is, in all its glory:
(async () => {
const themes = [
...await fetch('https://api.github.com/repos/PrismJS/prism-themes/contents/themes').then(res => res.json()),
...await fetch('https://api.github.com/repos/PrismJS/prism/contents/themes').then(res => res.json())
];
let index = -1;
alert(`Found ${themes.length} themes, use J/K keys to try them out`);
function handleKeyDown({key}) {
if (key.toLowerCase() === 'j'){
index++;
if (index >= themes.length) {
index = 0;
}
} else if (key.toLowerCase() === 'k') {
index--;
if (index < 0) {
index = themes.length - 1;
}
} else {
return;
}
console.log(`Showing Theme ${index} - ${themes[index].html_url}`);
if (document.querySelector('[data-theme-gallery]')) {
document.querySelector('[data-theme-gallery]').remove()
}
var link = document.createElement('link');
const theme = themes[index];
link.href = theme.download_url.replace('raw.githubusercontent.com', 'raw.githack.com');
link.dataset.themeGallery = true;
link.rel = 'stylesheet';
document.head.appendChild(link);
}
window.addEventListener('keydown', handleKeyDown);
})()In order to use it, open your blog (or app) where PrismJS is embedded, paste that snippet in your console, run it and then focus back on the page. Now hit J or K to go through the themes. Once you’re happy with one, check the console again, the current theme’s url will show up there.
I wanted to praise Githacks, a proxy which adds the right content-type headers for files fetched from Github, without which this technique wouldn’t work.
This content originally appeared on Things I've Learnt and was authored by Things I've Learnt
Things I've Learnt | Sciencx (2020-01-13T21:31:47+00:00) <em>Test PrismJS Themes</em> Directly On Your Blog. Retrieved from https://www.scien.cx/2020/01/13/emtest-prismjs-themes-em-directly-on-your-blog/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.