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.