PythonVuetifyMarkdown

Python Vuetify Markdown

This is an extension for Python-Markdown created for those who combine Python, Markdown, Vue, and Vuetify. I've been using this combination in several projects, and finally came across a need to process Markdown code, and keep it styled with Vuetify. Rather than McGuyver some solution in, I settled on a simple extension to do the heavy lifting.

The code is dead simple, and can be modified or extended to fit your needs.

Installation

pip install PythonVuetifyMarkdown

Usage

Here's a quick example of usage within a Django project. We have a Page model for custom pages, and a function to return the content parsed through Markdown.

from django.db import models
from django.utils.html import mark_safe
import markdown
from python_vuetify_markdown import PythonVuetifyMarkdown


class Page(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField()

    def get_body_as_markdown(self):
        return mark_safe(markdown.markdown(self.body, extensions=[PythonVuetifyMarkdown()]))

With this, you can create a Page object, and when displaying the body, you can use Page.get_body_as_markdown() to pass in the Markdown-formatted code.

Features

Currently, this extension modifies H1 to H6 tags and P tags. The styles can be found on the Vuetify Typography page.

• <h1> → <h1 class="text-h1">
• <h2> → <h2 class="text-h2">
• <h3> → <h3 class="text-h3">
• <h4> → <h4 class="text-h4">
• <h5> → <h5 class="text-h5">
• <h6> → <h6 class="text-h6">
• <p> → <p class="text-body-1">

Support

There is none. This is a small side project, like 30 minutes of research and work went into it. Good luck.