If styles exist in the head already, do not override this styles.

Make the md-page styles the least important of all styles

Thanks for writing this. I like this type of page builder. I tried saving the page once loaded in Firefox but it's not saving as an HTML page, just the source code markdown is saved. Is there any way to get the actual html the browser is showing us? I know that markdeep, which is similar, has a ?export function to get the html. Have you thought of maybe adding something like that?

I'm using this script, but would like an external css file, but can't seem to make it work:

`

Test`

And the CSS
h2 { color: blue; }

The H2 doesn't get the blue color. It generates an H2 tag, but no css attaches to it. The style sheet exists when I checked via the browser. So it seems to find it. What am I missing?

An optional parameter could use a certain title rank (h2 for instance) to generate a navigation tree into a navigation bar:

# My website

Welcome to my website

## Cool ideas

- Idea 1
- Idea 2
- Idea 3

## Friends

I love my friends:
- Friend 1
- Friend 2
- Friend 3

## Contacts

Contact me by fax!

…would generate:

<ul>
  <li><a href="#cool-ideas"></a>Cool ideas</li>
  <li><a href="#friends"></a>Friends</li>
  <li><a href="#Contact"></a>Contact</li>
</ul>

This could be nice to have a basic but effective navigation system, able to turn the page into a single page website. What do you think?

Tried uploading the example page with the script tag as shown to Netlify, but it just shows as pre tags instead of links, h1 etc. What am I missing? Do I need etc

https://nostalgic-dubinsky-3e6054.netlify.com/

Hello,

I have a question about DEV_README
I understand uglify-js is needed to compile the js files you have, but I'm unsure what make is referring to. Is this related to the Makefile ?
I got the build process to run using the command ./Makefile on Git Bash on Windows 10, but I can't specify whether I want to run concat or setup.

There should be human-readable documentation on what emoji shortcuts create what images.

I don't know if this is necessary, but I think it's somewhat redundant to ask everyone who submits a PR to also submit the minified code.

We could implement a build process, where we ask people to make PR to a review branch.
If it's approved and merged, it will activate a build process somewhere else (using tools like Travis CI) and push the minified version to the master branch if it passed all tests (which is currently being discussed #21)

The good thing is, this will maintain backwards compatibility as it does not change the githack URL for the minified file that's being imported by all current users.

Please consider disabling Rocket loader on oscarmorrison.com/md-page
I makes a big FOUC.

It is hard to eye-ball this way.

This is really cool! Nice work :-)

I've highlighted an issue I experienced looking at your current demo. See below:

What is the problem?

Flash of unformatted text.

Some ideas

• Try server side rendering to generate the DOM in advance.
• Hack - maybe you can use some CSS + JS to prevent the flash of styleless text.

I hope this helps you! Nice use of Showdown.

- [UpCloud ⌛](http://status.upcloud.com/) | [Cogent :airplane:](http://status.cogentco.com/)

becomes

• Cogent ✈️

Please advise.
Thanks.

Add a space after the link to improve readability.

          @p1ho any chance you can please have a look at this, seems to be an issue from the automation

Originally posted by @oscarmorrison in #64 (comment)

hello.

I use md-page a lot because it's very convenient.

When i use IE11, md page does not work.
Some users are still using IE...

Is there a way to get md-page working in IE ?

Ref: #5 #6

- [UpCloud ⌛](http://status.upcloud.com/) | [Cogent :airplane:](http://status.cogentco.com/)

redered as

• Cogent ✈️

Please advise.
Thank you.

If I use an accented character in my Markdown .html content I get a wrong character instead in the rendered document. I can easily fix that adding a meta charset="UTF-8" tag at the beginning of my .html document, sure, but maybe this is something you could fix for everyone?

Not found as of Dec 7 2023

I'm wondering if it's possible to display images referenced in the MD document. In my case they are saved relative to the document, like this:

![My fancy Image](img/image01.png)

Hey there !
I found some small grammatical typos here.

Would you mind assigning this to me, so that I can come up with a PR.

Would be good to have some basics tests in here.

Could just use jest, or something else. Very open to ideas

It would be nice if md-page was able to call a user-supplied function when its own conversion is complete. This user function could always be named onMdPageComplete() — md-page would call this function, if it exists, when it has done its stuff.

My own use case is to implement some images that popup on hover, via a lookup on the contents of the innerText of all the <a> elements.

Hey man, very cool project! You did good job here. I might have overlooked something but is there a possibility to add my own styles?

Let's say I want all the text to be justified or all the headings to be #bada55 colored.

• "with just markdown"
• "then uses the amazing showdown" markdown converter/parser
• "not a tech savvy"

You need to say that they also need Showdown and need to add it too. Also show that in the example.

Current wiki is pretty bare, would be good to have some more detailed examples.

• with custom styles
• with html elements
• etc

When I run npm run test I am getting the following error:
...
`● HTML Rendering Tests: Ensures Blockquotes are rendered accurately › It should render multiple-line blockquotes

expect(received).toMatchSnapshot()

Snapshot name: `HTML Rendering Tests: Ensures Blockquotes are rendered accurately It should render multiple-line blockquotes 1`

Snapshot: "<blockquote>
  <p>Line 1<br>
  Line 2<br>
  Line 3</p>
</blockquote>"
Received: ""

  207 |     await dom.window.document.addEventListener('DOMContentLoaded', async () => {
  208 |       await setImmediate(() => { }); // This is required for the second DOMContentLoaded.
> 209 |       expect(dom.window.document.body.innerHTML).toMatchSnapshot();
      |                                                  ^
  210 |       done();
  211 |     });
  212 |   });

  at Document.<anonymous> (test/script.test.js:209:50)

› 18 snapshots failed.
Snapshot Summary
› 18 snapshots failed from 1 test suite. Inspect your code changes or press u to update them.

Test Suites: 1 failed, 1 total
Tests: 18 failed, 18 total
Snapshots: 18 failed, 18 total
`

Hi! I understand and perfectly agree that the CSS should stay minimal.

However, by default, having a max-width would be nice.

May I suggest, if you don't know them:

• http://motherfuckingwebsite.com/
• http://bettermotherfuckingwebsite.com/
• http://perfectmotherfuckingwebsite.com/

From @Lawrence4code

Reference:
https://stackoverflow.com/questions/11274904/fallback-for-css-attributes-without-unit

the way this is currently done, having any pure html in the markdown breaks this

investigate a couple of other options: https://news.ycombinator.com/item?id=18156087

Can you try a Bootstrap + your MD-page plugin? Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <noscript>

    ##Blabla
    ####Lorem ipsum

    </noscript>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://raw.githubusercontent.com/oscarmorrison/md-page/master/md-page.js"></script>
  </body>
</html>

Could you add <body class="markdown-body"> to support https://github.com/sindresorhus/github-markdown-css ?

First of all, thank you very much for such contribution to community!

Here when I try to write powershell code with syntax highlighting, it fails.

Markdown:

Expected:

function Is-WindowAvailable {
    param(
        [string]$QueryProcess,
        [string]$WindowTitle
    )

Result:

See screenshot in readme, blockquote section

Hi
So far, very useful. I was wondering if the french accent issue you can see in the image can be fixed with ease :) ?
regards

It would appear that IE may require more polyfills than we initially thought.

I can try to get to the bottom of this.

Relevant:
#43 #44