Switching from Using Kramdown to Marked | Generated by AI
To switch from using Kramdown to Marked in your Jekyll blog, you’ll need to make a few changes to your Jekyll configuration and setup. Marked is a JavaScript library for parsing and compiling Markdown, and it can be used in conjunction with MathJax for better math rendering. Here’s a step-by-step guide to make the switch:
Step 1: Install Marked
First, you need to include the Marked library in your Jekyll project. You can do this by adding it to your site’s <head> section in your layout file (e.g., default.html).
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
Step 2: Disable Kramdown
In your _config.yml file, disable Kramdown by setting the markdown option to none or simply remove it if it’s set to Kramdown.
markdown: none
Step 3: Configure Marked with MathJax
You need to configure Marked to work with MathJax. Create a JavaScript file (e.g., marked-mathjax.js) in your Jekyll project and include the following code:
document.addEventListener("DOMContentLoaded", function() {
// Render Markdown content using Marked
const elements = document.querySelectorAll('.markdown-content');
elements.forEach(element => {
const html = marked(element.textContent);
element.innerHTML = html;
});
// Render MathJax
MathJax.typesetPromise().then(() => {
console.log('MathJax rendering complete!');
}).catch((err) => console.log('Typeset failed:', err));
});
Include this script in your layout file after including Marked and MathJax:
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="/assets/js/marked-mathjax.js"></script>
Step 4: Update Your Markdown Content
Ensure your Markdown content is wrapped in a container with the class markdown-content so that the JavaScript can target it for rendering.
<div class="markdown-content">
<!-- Your Markdown content here -->
</div>
Step 5: Test Your Setup
Build and serve your Jekyll site locally to ensure that Marked is correctly rendering your Markdown and that MathJax is properly displaying mathematical expressions.
bundle exec jekyll serve
Additional Notes
- Make sure your MathJax configuration is compatible with your Markdown content. You might need to adjust the configuration based on your specific needs.
- If you encounter any issues, check the browser console for errors and adjust your JavaScript code accordingly.
By following these steps, you should be able to switch from Kramdown to Marked in your Jekyll blog and take advantage of better MathJax support for mathematical expressions.