Vuetify Markdown

Vuetify.js is a semantic component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify.js uses Google's Material. Vuetify Code Editor. GitHub Gist: instantly share code, notes, and snippets. Material Design Framework. Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.

Latest version

Released:

Adds Vuetify typography classes to various tags

Project description

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.

pip install PythonVuetifyMarkdown

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.

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.

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

<h1> → <h1>
<h2> → <h2>
<h3> → <h3>
<h4> → <h4>
<h5> → <h5>
<h6> → <h6>
<p> → <p>

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

Release historyRelease notifications | RSS feed

0.1.4

0.1.3

0.1.2

0.1.1

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for PythonVuetifyMarkdown, version 0.1.4
Filename, size	File type	Python version	Upload date	Hashes
Filename, size PythonVuetifyMarkdown-0.1.4.tar.gz (2.6 kB)	File type Source	Python version None	Upload date	Hashes

Vuetify Markdown Editor

Hashes for PythonVuetifyMarkdown-0.1.4.tar.gz

Hashes for PythonVuetifyMarkdown-0.1.4.tar.gz
Algorithm	Hash digest
SHA256	`be41bf120a730560e43abc12782df5e60fa935513383c41d37e0d881ac1cba96`
MD5	`693a7e28fe351159aaf2a7792da5ab35`
BLAKE2-256	`50028724e4502d4b681ac8053c076562c53376a7a84fb3bb83f139127a1ca8ff`

index.html

<divid='app'>

<v-appid='inspire'>

<v-navigation-drawerpermanent>

<v-toolbarflat>

<v-list>

<v-list-tile>

<v-list-tile-titleclass='title'>

Example

</v-list-tile-title>

</v-list-tile>

</v-list>

</v-toolbar>

<v-divider></v-divider>

<v-listdenseclass='pt-0'>

<v-list-tilev-for='item in items' :key='item.title' @click='>

<v-list-tile-action>

<v-icon>{{ item.icon }}</v-icon>

</v-list-tile-action>

<v-list-tile-content>

<v-list-tile-title>{{ item.title }}</v-list-tile-title>

</v-list-tile-content>

</v-list-tile>

</v-list>

</v-navigation-drawer>

</v-app>

</div>

Vuetify Parse Markdown

script.babel

new Vue({

el: '#app',

data() {

return {

items: [

{ title: 'Home', icon: 'dashboard', to: '/' },

{ title: 'Current News', icon: 'announcement', to: '/blog' },

{ title: 'Demo', icon: 'info', to: '/demo' },

{ title: 'Products', icon: 'view_list', to: '/products' },

{ title: 'Contact Us', icon: 'contacts', to: '/contact' },

{ title: 'About Us', icon: 'person', to: '/about' },

{ title: 'Submit a Feedback', icon: 'feedback', to: '/feedback' }

right: null

};

}

});

Vuetify Display Markdown

scripts

styles

vuetify-sidebar.markdown