Markdown: is it possible to read .md markdown in f7?

1

I want to know if it is possible in f7 to read markdown files from local assets folder to show the content in a page using some kind of node plugin if necessary, this need it is because I have a page of terms and conditions long text that it is updated as an external markdown .md file and I just need to display this content in a page when calling terms and conditions page without having to type all text as html in a page!

any ideas if this might work?
thanks

2

Not natively, but have you checked out Showdown? https://showdownjs.com/

1 Like
3

thanks NJVAN! I think https://showdownjs.com/ looks interesting too!! thanks!!

But I think I found this solution! I found this plugin and works fantastic in f7 if you are interested too! maybe I can try to test the one you sent me https://showdownjs.com/ to compare but this plugin below works very nice too!

I share this info below, I am using f7 with vite latest version!:

the markdown plugin that worked for me it is called MarkdownIt!

https://github.com/markdown-it/markdown-it

Demo where you can grab the demo .md file to test

https://markdown-it.github.io

in the page:

<script>

import MarkdownIt from "markdown-it";
import emoji from "markdown-it-emoji";
import footnote from "markdown-it-footnote";
import deflist from "markdown-it-deflist";
import mark from "markdown-it-mark";
import sub from "markdown-it-sub";
import sup from "markdown-it-sup";
import ins from "markdown-it-ins";
import abbr from "markdown-it-abbr";
import container from "markdown-it-container";

const markdown = new MarkdownIt({
html: false, // Enable HTML tags in source
xhtmlOut: false, // Use '/' to close single tags (<br />). // This is only for full CommonMark compatibility.
breaks: true, // Convert '\n' in paragraphs into <br>
linkify: false, // Autoconvert URL-like text to links
typographer: true, // Double + single quotes replacement pairs, when typographer enabled, and smartquotes on. Could be either a String or an Array. For example, you can use '«»„“' for Russian, '„“‚‘' for German
//quotes: '“”‘’',

});

markdown.use(emoji);
markdown.use(footnote);
markdown.use(deflist);
markdown.use(mark);
markdown.use(sub);
markdown.use(sup);
markdown.use(ins);
markdown.use(abbr);
markdown.use(container);

export default (_, {
...

In the page content:

    <div class="page-content">

      <div class="block">
        <div class="terms" innerHTML=${terms}></div>
      </div>

    </div>

In the script section:

export default (_, {
    $el,
    $,
    $f7router,
    $f7,
    $update,
    $on,
    $onBeforeMount,
    $onMounted,
    $onBeforeUpdate,
    $onUpdated,
    $onBeforeUnmount,
    $onUnmounted,
    $store,
  }) => {

    let terms = '';

    fetch('/assets/markdown/terms.md')
      .then((response) => response.text())
      .then((text) => {
        terms = markdown.render(text);
        $update();
    })

And it works flawless!

I found finally a solution for my markdown .md long text files that works with f7!!
I hope you guys you can found it interesting and useful for your future projects too in the need to read .md files and to include them as html code in your page, as it was in my case!

Cheers!!! :partying_face: :+1:
best regards!

1 Like