I have a shell script sync to my Note 3 and use MarkdownX on that device to edit and read. Markdown for the component era. MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. How to add Markdown functionality to any Django website.
This is my first crack at using Django-Markdownx, which is a comprehensive Markdown plugin built for Django that has raw editing and a live preview inside of the Django admin. I looked into many other ways to implement markdown (django-markdown, django-markdown2, django-markdown-duex), but the ability to drag & drop image uploads won me over. Implementing it is very straight forward, so let's begin there.
Most of this comes straight from the GitHub instructions at Django Markdownx, so take a look if you need more detail.
First, install django-markdownx:
pip install django-markdownx
Next, add markdownx to your INSTALLED_APPS in settings.py:
And add markdownx URL patterns to your
urls.py:
Now, MarkdownX has a two static files it uses for the ability to preview the markdown, markdownx.css and markdownx.js, so we need to run 'collectstatic' to collect MarkdownX assets to STATIC_ROOT:
Now we can start using MarkdownX in our models. In my example (this blog) I used the MarkdownxField for the body of my blog post:
Where DateCreateModMixin is just a mixin I use for any model where I want to keep track of the created and modified date-times:
Now that we have our model, we can add it to admin:
I'm doing several things here if you aren't that familiar with Django:
@admin.register(BlogPost)adds your model to the admin panelclass BlogPostAdmin(MarkdownxModelAdmin)allows you to edit what is displayed when you are viewing the entries in admin and it inherits fromMarkdownxModelAdminso we can see the live preview.
The rest of it isn't MarkdownX specific, but let's go over it anyway (I know I hate see extra unexplained code in examples):
list_display = ('title', 'created_date', 'mod_date')shows the Title, Created Date, and Modified Date in the list of Blog Posts.list_filter = ('created_date', 'mod_date')allows you to filter by the fields specified.
Finally,
search_fields = ('title',)allows you to search the specified field.
The admin list of blog posts now looks like this:
And the blog entry page looks like this:
Since I'm trying to do this in admin, the live preview is below the entry area, so it's not as easy as I'd like. I will be looking into modifying admin to put them side by side or making a separate edit page in the future because it seems to jump around when it resizes. Another issue I've found is code blocks. I thought the three back-ticks (``` ```) only worked for single lines of code, but GPraz mentioned in the comments that it works if formatted correctly. Unfortunately, it's still not working for me, so maybe I need to update my package. Here is an example of the formating:
Incorrectly formatted:
```first line of code
second line of code```
Renders as:
first line of code second line of code
But,
Correctly formatted:
```
first line of code
second line of code
```
Renders as:
first line of code second line of code
But 4 spaces work as expected (except when you tab, the tab is inserted but the cursor doesn't move to that position):
␣ ␣ ␣ ␣ first line of code
␣ ␣ ␣ ␣ second line of code
Renders as:
Now, let's add the add the post(s) to views.py:
Markdown Xml
Note that this still needs pagination, but I'll add that at a later date.
Next, urls.py needs to be updated:
This adds the paths to our pages and and media files needed for MarkdownX. Don't forget to add MEDIA_ROOT to settings.py like I did:
Finally, let's add the fields to the templates (I'm using bootstrap, so ignore the styling):
blog.html
post.html
You can see above that I added a couple of methods:
.formatted_markdown
- formats the markdown in the MarkdownxField() into HTML for the template using
markdownify
.body_summary
- grabs the first 300 characters for the summary
Markdownx Apk
So, the updated model in models.py looks like:
That should be it! Feel free to ask any questions below!
Similar Posts
I sat down to write a post about setting up my Twitter client on my phone, but this post quickly became about the app I'm using to write this post, instead.
My first post written from the Chromebook used the Android app JotterPad as a markdown editor. This time, I'm using the other app that made the cut when I was evaluating apps a few months ago: MarkdownX.
Let the showdown begin..
Live Preview
One thing I really do immediately like about Markdown X is the double-pane mode showing my markdown writing on the left and a live, updating preview on the right. You can toggle this display in the phone app, but the Chromebook automatically uses the tablet version and gives you only this multi-view. Half of the screen is enough horizontal space for me to compose on a 12-inch Chromebook, so this is great for me. Although, some reviewers in the Play Store wish they could turn off the preview when using smaller tablets.
The markdown preview, as in other editors, looks a little wonky at the top because it also displays the required yaml front matter for my Jekyll blog as well as the 'more' separator used for displaying just the first bit of the post on my home page.
Otherwise, the preview is as you'd expect: links show up in the preview as coloured hyperlinks, font sizes and styles are rendered as well as all the other markdown-y things. The app has a built in cheat sheet you can navigate to, which is handy because I still don't feel very fluent in markdown and have to stop myself from reverting to html tags that I already know. And, it has a markdown toolbar for some of the popular formatting options. So, it's a very nice app to use while actually writing.
Unfortunately, there's more to a markdown editor than just writing. What happens to those words? Where do they go? How do you return to them later?
File Saving / Organization
This has been causing me a bit of grief, to be honest. I'm not yet sure how much to attribute this to running Android apps on a Chromebook vs. using the app itself, but it's a bit quirkier than I'd like.
Markdownx Android
MarkdownX can store your .md files either locally or on Dropbox. If locally, though, I can't find in the filesystem where the files are located. This leads me to believe that the data is being stored somewhere I can't simply navigate to through a file explorer. I like to have direct access to my files so they can be moved, deleted, backed up or even opened with other apps. There is a 'share' feature available from the menu when editing a post, and the option to share as a markdown file or as html. But, I don't seem to be able to 'share to' my local file system (or 'export' as sometimes this option is called). So, after saving my initial draft of this post locally, I switched to saving to Dropox. This is not without its quirks, either.
Saving a file to Dropbox will automatically create a new folder labeled 'markdown' in Dropbox for you. That's fine, I guess. But, when you are editing a 'Dropbox' file, the autosave icon changes to an upload icon. So I assumed I had lost the notion of auto save and should therefore manually click the upload icon as I went along. (Maybe I hadn't, but since the one icon replaced the other, it's a reasonable thing to assume.) Doing so created another, nested 'markdown' folder inside my 'markdown' folder every time I saved. Losing the autosave is problematic enough, but if saving creates all these nested folders, then I don't see how working off of a Dropbox hosted file is at all tenable.
. . . so untenable, in fact, that I've saved and reopened this file back up in JotterPad to finish it. A bit of a shame, since I liked composing in MarkdownX very much. But, I just didn't feel comfortable enough with the file saving options. That and the app hadn't been updated since 2015 and the website listed on the Google Play store was no longer in operation. Given that JotterPad was last updated 9 days ago, I think we have our markdown editor winner. :)
Don't get me wrong, JotterPad is working well and looks very clean. I just prefer the split screen of MarkdownX to alternating between edit mode:
and preview mode:
In fact, what I would prefer to both of these options is something like what Typora for Mac OS does. Visit Typora's website and check out how snazzy their live preview updating changing what you type to markdown preview as you type it is. It sounds like it might be distracting, but it's actually amazing. In fact, the only time I felt I was coming close to actually learning and internalizing markdown was when I used Typora to compose.
I'm not done playing around with my options yet, though! Stay tuned for my next attempt at simply composing in markdown in the browswer window directly on Gitlab.com. (And, of course, I haven't even installed MrHyde on the Chromebook yet..)
But, as far as Android markdown editor apps go, I guess I'll be sticking with JotterPad.
UPDATE: I found the files!
Markdown Meaning
OK, so it took a little more digging, and I needed to install a separate file explorer (I use AndExplorer), but I did manage to navigate to and move around my MarkdownX local files.
Most of my apps create their own data folder directly in a top level of the Android system, but some apps store their data under Android>Data>(developer/app specific folder). That's where my MarkdownX files were stored. It took a while to find them because I'm on a Chromebook and with respect to viewing the Android-specific storage in Chrome OS's file manager. . . well, 'You can't get there from here.'
Markdown Calculator
In a Chromebook, you can navigate to the Settings panel (settings? really?) and select 'Storage Management' which will give you a path down which you can eventually see the contents of the Android portion of your machine. Harry potter and the chamber of secrets full movie putlocker. Although menu items such as 'copy' and 'move' exist in this, let's-call-it-a-file-manager(?), I didn't find these to work, even when just trying to move files around within the Android storage portion. ('Share', to either Google Drive or Dropbox did work.)
Markdown Xss Payloads
So, I think I will be doing a semi-complete 180 on my initial verdict! I did finally install MrHyde on this Chromebook, and holy crap are the early returns sweet! Whatever my final process ends up being, MrHyde will be play the starring role. I'll experiment with a few things on my next couple of posts and report back. But the next task at hand is absolutely to make this a MrHyde-optimized setup. (This app has its own markdown editor built in, so it's possible that I won't even need a separate app, but I may prefer the markdown writing experience of a dedicated, more full-featured editor like MarkdownX or JotterPad.)
Stay tuned for more about MrHyde! It's an exciting little app!
Comments are closed.