pngwn / prism-svelte

Svelte language extension for prismjs
65 stars 6 forks source link

Syntax highlighting of svelte fenced code blocks doesn't seem to work with .svx files #6

Open mcmxcdev opened 4 years ago

mcmxcdev commented 4 years ago

Until yesterday, I was able to have svelte highlighting of fenced code blocks with prism in markdown files just fine, it worked great!

Today I switched over to using .svx instead of .md and my code blocks are now completely unstyled.

Is this not supported yet or an issue on my side?

_posts.js looks like this at the moment:


const fs = require('fs');
const frontMatter = require('front-matter');
const marked = require('marked');
import Prism from 'prismjs';
import 'prism-svelte';
const loadLanguages = require('prismjs/components/');
loadLanguages(['shell']);

const posts = fs
  .readdirSync('./src/routes/blog')
  .filter((elem) => elem.endsWith('.svx'))
  .map((postFilename) => {
    const postContent = fs.readFileSync(`./src/routes/blog/${postFilename}`, {
      encoding: 'utf8',
    });

    const postFrontMatter = frontMatter(postContent);

    const renderer = new marked.Renderer();

    renderer.code = (source, lang) => {
      const html = Prism.highlight(source, Prism.languages[lang], lang);
      return `<pre class='language-${lang}'><code class='language-${lang}'>${html}</code></pre>`;
    };

    const html = marked(postFrontMatter.body, { renderer });

    return {
      ...postFrontMatter.attributes,
      html: marked(html),
    };
  });

const modifiedPosts = posts
  .filter((post) => !post.hidden)
  .sort((a, b) =>
    new Date(a.creationDate).getTime() > new Date(b.creationDate).getTime()
      ? -1
      : new Date(a.creationDate).getTime() < new Date(b.creationDate).getTime()
      ? 1
      : 0,
  );

export default modifiedPosts;