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 several tags, and adds spoiler text functionality. 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">
• <a> → <a class="text-no-decoration">
• *text* → <span class="font-weight-medium">text</span>
• **text** → <span class="font-weight-bold">text</span>
• ***text*** → <span class="font-weight-black">text</span>
• !!text!! → <span class="font-weight-thin">text</span>
• !text! → <span class="font-weight-light">text</span>
• _text_ → <span class="font-italic">text</span>
• __text__ → <span class="font-decoration-underline">text</span>
• --text-- → <span class="font-decoration-line-through">text</span>
• ||text|| → "â–’â–’â–’â–’" normally, "text" on hover

Support

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