How to I go about displaying a Mark Down file in a normal web browser?

How to I go about displaying a Mark Down file in a normal web browser? GitHub has readme files that have mark down syntax in their ascii files that a Mark Down interpreter will format and display for us in a nice asthetic display. But what if we want to have this done on our own? ChatGPT suggested some HTML code that did not do anything at atll. A FireFox extension was supposed to work, but it did nothing.

And knowing how to do this is very useful. A lot of open source projects have a README.MD file or a CHANGELOG.MD file that can help us install a benefitial CMS to help us save the world.

I imagine there must be some easy way allowed to us to make this happen in HTML CSS with JAVASCRIPT.

Are you saying that you want to type into a web page some content formatted with Markdown and have it automatically converted to HTML?

To start with, many code editors will convert Markdown to HTML, which you can then copy and paste into your web pages. But that’s a manual process, so to speak.

Many CMSes allow you to write in MD format and then convert the content to HTML for you. (It’s also not too hard to write an add-on for a CMS like WordPress to do this as well.)

Maybe clarify what your situation is and what your expectations are. The simplest option for small amounts of content is to convert your MD to HTML with a code editor and then past it into your web page.

2 Likes

As I was replying I realized that there might be something important that you do not understand. For display in a browser, markdown is always converted to HTML. That is a necessity, it is always done before being displayed in a browser.

That is much like what HTML does. The Mark Down format has tags that indicate styling and formatting that gets converted to HTML. Are you familiar with HTML? I know you know what it is but have you learned it and know how to use it?

What code is that?

What extension is that?

Are you trying to do the conversion (to HTML) using JavaScript or are you asking if a file that has markdown, HTML, CSS and JavaScript in it can have markdown converted to HTML?

Having JavaScript in the same file as markdown seems to be contradictory with the purpose of markdown. If you want to use JavaScript with markdown then you should just use HTML, CSS and JavaScript without markdown.

Use of JavaScript to do the conversion seems very unusual. I think it would be too complicated to explain what I mean but it would be strange.

Perhaps you want the conversion to happen on the server. Does anything change each time a conversion is done (for a view from the website) or is the input always the same? If the input to the conversion is always the same then you can use a static site generator to do the conversion for you.

Also “markdown” is not a universal definition. There are flavors.

To display a Markdown file in a browser, you can either convert it to HTML using tools like Pandoc, use JavaScript libraries like Showdown or Marked.js to dynamically render it, or install a browser extension like Markdown Viewer. You can also use GitHub or GitLab to host and display Markdown files directly.

How is it possible to show markdown in a browser without it being converted to HTML?

I think the implication there is to convert it to its output form, rather than its plaintext. But the pedant in me appreciates the distinction.

I am sorry but I do not understand. If I am the only person that does not understand then you should ignore that comment.

Perhaps the original question was how to get Markdown formatting to display in the browser and not be converted to HTML? If so, then you can display it inside <pre> tags, like so:

## Heading

- list item

> blockquote

As you see, this forum software colors that Markdown text, so there is obviously a JS library handling that syntax coloring. I expect something like Prism handles that. (Not sure what’s being used here. Edit: it seems to be highlight.js)

You can manually color code your own code blocks, but it’s a bit labor-intensive.

this word is <span style="color: red">red</span>

(Note that it doesn’t work here because of the forum settings, but that’s how you can color code on your own site.)

Well it does… otherwise I couldnt get the crayons out from time to time.

I meant inside code blocks. I can color code in pre elements on my plain old website, but here it doesn’t work — I presume because something is overriding it.

Well for clarity, a code block and a pre element are two different things.

Color works inside pre. Even here.

Code blocks wont work because they disable code parsing, so you can write your <span>tags inside a code block and have them be visible...</span>
(For the record, i assume what’s happening with a code block is some background HTMLEntity replacements that prevent the HTML from rendering)

1 Like

Weird. I tried using <pre> tags with embedded span and style and it didn’t work for me. Good to know it can work, anyhow!

1 Like

If so then I hope wm_m_thompson clarifies the question. The question asks:

<pre>
<span style='color:darkviolet'>&lt;pre&gt;</span>
  <span style='color:orangered'>&lt;code&gt;</span>
    <span style='color:green'>const</span> <span style='color:red'>x</span> = 1;
  <span style='color:orangered'>&lt;/code&gt;</span>
<span style='color:darkviolet'>&lt;/pre&gt;</span>
</pre>
<pre>
  <code>
    const x = 1;
  </code>
</pre>

The only way I could get around displaying the pre inside pre was to use html entities. Fun trying.

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.