Login/Register
Visualizing README.md files in my website
Asked Answered
htmlgithubmarkdown
K

3

14

I want to visualize README.md files from a project in github, in my website. What is the best way to do this? Like fetch the markdown code and process the mark down locally? Or there is a way to fetch the already processed markdown from github?

Klipspringer answered 16/2, 2016 at 20:26 Comment(2)
Possible duplicate of Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile) – Fortran
One answer suggests using JavaScript, but that leaves out the whole idea of it being a backend server process which could be the most appropriate solution. – Piscina
P
7

One possible solution is to use a javascript-based markdown parser, such as https://github.com/evilstreak/markdown-js.

That library can be loaded from the browser and can display the markdown. In this example (taken from the aforementioned site), you would need to fetch and insert the markdown in the output of your site:

<!DOCTYPE html>
<html>
  <body>
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6" cols="60">Insert proxied **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="lib/markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>
Psittacine answered 16/2, 2016 at 20:47 Comment(1)
FYI Markdown-js is no longer maintained. The github page redirects to other projects : Markdown-It, Showdown, Marked – Artificial
P
2

Here is a much better way to do it that seems to be more in line with the questions and it certainly suited my needs. This implements a server-side, back-end processor that servers up HTML rendered from Markdown on the fly.

Here is an excerpt for PHP, but other languages are supported and documented in the link:

PHP

  1. Download PHP Markdown (or PHP Markdown Extra) and PHP SmartyPants from Michel Fortin.

  2. Put markdown.php and smartypants.php somewhere in PHP's include path (or in the same directory as render.php).

  3. Add an alias in your Apache config:

Alias /markdown/ "/var/www/support/markdown/"

  1. Add rewrite rules. This can be done in the .htaccess file for a specific folder, or in the global Apache config. Some common extensions are included, but you can adjust them to your needs. (You might want to process all text as Markdown by adding "txt".)
# display Markdown as HTML by default 
RewriteEngine on 
RewriteRule .+\.(markdown|mdown|md|mkd)$ /markdown/render.php 
RewriteRule .+\.(markdown|mdown|md|mkd)\-text$ /markdown/render.php [L]
Piscina answered 23/8, 2018 at 20:33 Comment(3)
Firefox is warning me of a security risk from that top link – Beardsley
Hmm, looks like the link is bad now... I’ll check the archive... – Piscina
Fixed the link—it’s on GitHub now. – Piscina
D
0

Also, as this post describes, you can use the zero-md library and easily plug a Markdown file into your HTML document.

<head>
  ...
  <!-- Import element definition -->
  <script
    type="module"
    src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"
  ></script>
  ...
</head>
<body>
  ...
  <!-- Profit! -->
  <zero-md src="/YOUR_MARKDOWN_FILE.md"></zero-md>
  ...
</body>

Remember that the YOUR_MARKDOWN_FILE.md must be also present (hosted) on your server!

Dumpling answered 10/4, 2024 at 19:12 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.