zerodevx / zero-md Goto Github PK

View Code? Open in Web Editor NEW

356.0 5.0 45.0 1.15 MB

Ridiculously simple zero-config markdown displayer

Home Page: https://zerodevx.github.io/zero-md/

License: ISC License

HTML 18.26% JavaScript 81.74%

webcomponents markedjs customelements markdown-to-html highlightjs katex mermaid

zero-md's People

Stargazers

Watchers

zero-md's Issues

Image not rendering

Why image are not rendering?

<center>

![](https://i.imgur.com/aUpWefG.png)</center>

I tried without <center> Nothing works.

Link clicks do not open in new tab

Trying to CMD + click on link within element does not open in new tab, takes over current tab.

I see that you are hijacking links to make the scrolling work.

Google Translate cannot handle MD file

HTML is translated well, but MD file won't be translatable. How can I enable this translation feature?

Google translate cannot handle MD file
Popup translation neither working on Chrome browser

HTML
https://github.com/decryp2kanon/test_website/blob/a1ad8aaf95488632e276bcbfeb3808999cc25bd1/index.html#L131

MD
https://github.com/decryp2kanon/test_website/blob/master/README.md

Screenshot on your website

Many thanks,
kanon

this._resolve is not a function

Having an issue when dispalying the component, than remvoing it where connectedCallback is fired after the resolve method is deleted (https://github.com/zerodevx/zero-md/blob/main/src/index.js#L71). Maybe need to check if this exists before calling it?

Uncaught TypeError: this._resolve is not a function
    at HTMLElement.connectedCallback (index.js:70)

Here is my related code:

import 'zero-md/dist/zero-md.min.js';   // could not import src since it tries to import a JSON file
// ...
render() {
       return html`
                ${this.item?.changelog && this.item?.changelog !== '' ? html`
                    <zero-md @zero-md-rendered="${() => this.dispatchEvent(new Event('notifyResize'))}">
                        <script type="text/markdown">${this.item?.changelog}</script>
                    </zero-md>
                ` : html`
                    <p>&mdash;</p>
                `}
       `
}

This component is shown in a dialog and on closing the dialog I get the error.

Anchors in Markdown

Anchor links aren't working. I see in the code that headers have id's properly (without needing to manually implement them, nice!) but when I put anchors up in a table of contents the links don't do anything. I even tried adding manual anchors using HTML in my md but it still didn't do anything.

CSS selectors based on root element not working.

index.html

<style>
#menu ul {
    margin: 0;
    padding: 0;
}
#menu li {
    display: inline;
    padding: 0;
    margin: 0;
}
</style>
<zero-md id="menu" src="index.md"></zero-md>

index.md

- [Home](info.md)
- [Bugs](bugs.md)
- [Development](development.md)
- [Testing](testing.md)
- [Suggestions](suggestions.md)
- [TODO](todo.md)

Browser fails to apply the styles to the markup inside shadowRoot.
If I use <template><style> tags, it completely overrides the base style which is pretty annoying, and the same happens even if I use css-urls= attribute.
Even when I make sure the styles are defined inside the shadowRoot element, #menu ul has no effect at all.

latex support

Rendered content is inside a scrolling area

I'm noticing a strange bug in the rendered document. The rendered content is cut off and contained by a scrollable area, but I don't see anything that would contain it and there aren't any DOM elements that have an overflow rule. The content is rendered without a shadowDom, which makes this all the more strange.

Here is a script to reproduce it.

Not rendering on Microsoft Edge clients.

https://gyazo.com/e877c1153eb686cbf8ba84bc5682d4d1

fallback for browsers that don't support contain property

Please see ruphin/slidem#4 (comment)

tl;dr: zero-md should add overflow:auto before contain: content in _buildStyles to support browsers that don't have the contain CSS property.

Having some issues getting hash scrolling to work is there anything specific that needs to be done for it to work?

Zero-md not displaying md file with a relative link

Firstly, thanks for your effort on this awesome project!

I'm trying the zero-md with a very simple example shown in README. But zero-md didn't display the md file.

However, when I change the src link with a http link such as https://raw.githubusercontent.com/zerodevx/zero-md/main/README.md, it can work! I couldn't figure out why it can not display the md file with a relative link.

You can try blog.zip if you want to reproduce.

My html look like:

<!DOCTYPE html>
<html>
    <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="README.md" ></zero-md>
        ...
      </body>
</html>

And my directory is like:

.
├── README.md
└── index.html

add 2 topics to documentation

please mention in the documentation the event zero-md-marked-ready and the tip of using new marked.Renderer() while passing options to add features to the marked library.
The way it is now in docs, it is very difficult to understand how should one add a custom extension to the Marked library.
Also, it would be very useful exposing the method marked.use() in zeromd, but I guess that is more difficult.

Finally, thanks for this great piece of software, i like it far more than other markdown renderers.

Edit:
As an example, I needed to rewrite every link between local markdown files. So i had to modify the link function in marked.renderer just after the marked lib was loaded. In the following code, zmd was the zeromd element.

zmd.addEventListener('zeromd-marked-ready',  function () {
    myrenderer = new marked.Renderer();
    myrenderer.link = myLinkFun;
    marked.setOptions({renderer: myrenderer});
});

Code Highlighting not working in java code

Java Code highlighting is not working, can please check this issue

Getting a CORS error locally

To try your code out, I created a basic index.html:

<!doctype html>
<html lang="en">

<head>
    <title>Try This</title>
    <meta charset="utf-8">
    <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
</head>

<body>
    <zero-md src="README.md"></zero-md>
</body>

</html>

README.md:

# This is a markdown file

This is text

## This is an h2

* This
* Is
* A
* List

When I open the file locally, I get this CORS error:
Fetch API cannot load file:///C:/{local path to}/README.md. URL scheme must be "http" or "https" for CORS request.

I don't have this issue with other static pages that use js locally, so I'm not sure what your stuff is doing to trigger CORS; is there anything that can be done? I'm looking for the lightest weight solution to render static documentation and this would be great if I don't have to push it somewhere to view changes.

Automatically re-render when src changes?

Any clue or tips on how to get this to work?

Currently setting the "src" attribute in the "zero-md" element using javascript but I'm not getting auto re-render.

    <zero-md id="mymd" src="INDEX.md"></zero-md>

    <button onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {
      document.getElementById("mymd").src = "1993-05-15-off-to-download-linux.md";
    }
    </script>

Render `.md` file inside `.mdx` file

I want to render the .md file inside .mdx file. I did this

import ZeroMd from "zero-md";

customElements.define('zero-md', ZeroMd)

app.render(<zero-md src="https://raw.githubusercontent.com/wechaty/openapi/main/CHANGELOG.md"></zero-md>, target)

But it's not rendering.

First line indentation within syntax highlight

How can I avoid indentation with zero-md?

I have included a .md file to my github page using zero-md. The rendering however introduces indentation to the file (including to the syntax highlighted blocks). Is there any way to avoid this?

Thank you!

Custom language in code blocks

Is it possible to add your own language syntax to code blocks? So for example I have the language "ddp" and I make a code block like this:

```ddp
x ist 0. [ x = 0; ]
```

It should generate something like this:

<pre class="language-ddp" tabindex="0">
  <code class="language-ddp">
    "x "
    <span class="token operator">ist </span>
    <span class="token number">0</span>
    <span class="token punctuation">.</span>
    <span class="token comment">[ x = 0; ]</span>
  </code>
</pre>

Copy icon

Add copy icon inside the code section like github.

Did not actually build v1.3.0

Note to self: I should really add automations for version increments.

Are there any lifecycle hooks for the rendering?

Hi! I really like your project and hoping to use it. But I'm wondering if there are any lifecycle event I can use that trigger after the HTML has been rendered?

My usecase is I'm trying to see if I can use Javascript to manipulate the contents of the page after it's rendered into HTML.

stylesheets not affecting the markdown

I have tested some inline style for my markdown files but , I don't see any results :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script
  src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"
  ></script>

  <title>Articles</title>
</head>

<body>
  <zero-md src="posts/post1.md" no-shadow>
    <template>
      <style>
        h1 {
          color: red;
        }
      </style>
    </template>
  </zero-md>

</body>
</html>

My markdown file :

# Hello World

the text is not red
I have also tried using external stylesheets but with no effect.
I have opened the index.html file using live server extension in VS Code

Markdown is currently being loaded twice

Without changes to my implementation of zero-md, multiple environments are now displaying two copies of the generated markdown. I am using:

<head>
...
  <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
...
</head>
<body>
...
<div>
    <zero-md src="{path to .md file}">
        <template>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
            <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css">
            <style>
                :host {
                    top: -32px;
                }
                .markdown-body h1 {
                    font-size: 24px;
                }
                .markdown-body h2 {
                    font-size: 20px;
                }
                .markdown-body h3 {
                    font-size: 16px;
                }
                .markdown-body code {
                    background-color: #f5f5f5;
                    border-radius: 2px;
                    padding: 2px;
                    font-weight: bold;
                    font-size: 14px;
                }
                .markdown-body pre,
                .markdown-body pre code {
                    background-color: #f5f5f5;
                    border-radius: 2px;
                    font-weight: 400;
                    font-size: 14px;
                }
                .markdown-body pre {
                    padding: 8px;
                }
            </style>
        </template>
    </zero-md>
</div>
...
</body>

The added styling is to match a material-esque website it's embedded in, but maybe it's no longer compatible after your recent release? Any help is much appreciated.

boilerplate html → doesn't load content

I've tried your boilerplate HTML and it doesn't load any content. What I am missing?

I've copied the following code and included my own MD files.
The result → nothing is rendered in a browser.

<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="/example.md"></zero-md>
  ...
</body>

Is it possible to use your zero-md with mathjax?

Hi, is it possible to use your zero-md with mathjax?

No markdown visibility with Firefox

Zero-md doesnt work with Firefox.

(Tested with Firefox 60.9 on Debian 9)

how to add mermaid support?

Following https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/, there might be greater use of mermaid overall. How can one go about adding official mermaid block support to zero-md?

Catch errors/warnings

If zero-md throws a 404 warning, I'd like to catch the error, so I can display a custom 404 page + cancel the process. Is that possible?

Make es modules compatible

Hey,

I would like to be able to import the element as an es module, but there is no module property in the package.json, and the element seems generally not setup for es modules

No Support for React-Native

I am using React-Native with Expo. When I install this package with yarn, and I try to use it, I get this error: Can't Find Variable HTMLElement.

Automatic re-render

"Note that if changes are made to attributes or children dynamically, call the render() method on that instance to force a re-render."

This leads to not very ideal code for triggering updates to my markdown. I was a render React-like render function with lit-html, and to get zero-md to update I have to set a timeout and imperatively call render on the zero-md instance, which doesn't fit with the flow of everything.

Could you expose a property that I could bind to, which would let me set the markdown text and then automatically re-render? I'm happy to PR if you'll accept

V1 - Bullet Points and Numbers in lists not showing

I've got a list in my .md file, but it won't show up with the icons.

Here's my code:

<zero-md class="pageMD" id="pageMD" src="./src/introduction.md" no-shadow></zero-md>

- Please correctly format your issues and pull requests
- Please follow the guidelines in the Contribution Plan
- Never commit directly to the Main branch. Open a new branch for commits
- Please name your branch according to the following specification `YOURUSERNAME/BRANCH-AIM`. E.G: `IzMichael/Add-ContactForm-Component`
- Please use 4 spaces for indentation

And it outputs this:

not working without web server ?

index.html:

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Edit your site info here -->
    <meta name="description" content="EXAMPLE SITE DESCRIPTION">
    <title>Card Readers</title>

    <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.15/webcomponents-lite.min.js"></script>
    <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/build/zero-md.html">
    <link rel="stylesheet" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/markdown-themes/default.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/zerodevx/zero-md/v0.2.0/highlight-themes/default.css">
  </head>
  <body unresolved>
    <style>
      /* Edit your header styles here */
      .header { font-family: sans-serif; font-size: 20px; text-align: center; position: fixed; width: 100%; line-height: 42px; top: 0; left: 0; }
      .md-html { min-width: 200px; max-width: 790px; margin: 56px auto 0 auto; padding: 20px; }
    </style>

    <!-- Edit your header title here -->
    <div class="header">Card Readers</div>



    <!-- Edit your Markdown URL file location here -->
    <zero-md file="file:///Users/apple/workspace/go/src/bitbucket.org/gedw99/md-x/_docs/Tech/CardReader/readme.md"><div class="md-html"></div></zero-md>
  </body>
</html>

readme.md

## Card Readers

For Mobile phones, there are no card readers. 

For desktop, there are  drivers

For ChromeOS and Chrome, there is built in support.


## List for Health Care (other countries to follow)


| Device            | Pic                                   | OS (WIN, OSX, LIN, GOS)   |  Drivers (url)        | 
| -------------     | -----                                 | -                         | ---                   | 
| SCM eHealth2000   | ![](ehealth200_bcs-terminal_.jpg)     | Win, OSX, Linux, GOS      | http://www.scm-pc-card.de/index.php?lang=en&page=download&function=show_downloads&product_id=589 | 
| Cherry ?          | Pic                                   | drivers                   | driver

relative md links not working when in subdirectories

If I have the following md directory structure:

/var/www/html/docs/
/var/www/html/docs/index.html
/var/www/html/docs/test/
/var/www/html/docs/test/top.md
/var/www/html/docs/test/subdir/
/var/www/html/docs/test/subdir/subdir.md

With index.html contains:
<zero-md src="test/top.md"></zero-md>

And top.md contains:
[subdir](subdir/subdir.md)

Then when browsing to "http://<domain.com>/docs/"
the "subdir" link in the zero-md rendered html of top.md incorrectly points to: http://<domain.com>/docs/subdir/subdir.md

whereas the "subdir" link should point to: http://<domain.com>/docs/test/subdir/subdir.md
so there is a missing path sub dir of "test"

npm release

Please release via npm to support workflows like @pika/web

CORS Error

I'm using the development server of LitElement, you have any ideawhat can I do to resolve this Reason: CORS header 'Access-Control-Allow-Origin' missing`

html

<zero-md id="zero-viewer" manual-render="" src="https://gitlab.com/israelfloresdga/temp/raw/master/0.md"></zero-md>

Console
[zero-md] Error getting file https://gitlab.com/israelfloresdga/temp/raw/master/0.md zero-md.js:75:19

Can custom Js be ran?

I wish to open anchor tags in a new tab. I used the following Js code but it doesn't alter the behavior. The anchors variable returns an empty node list. What am I doing wrong?

<script>
        var anchors = document.querySelectorAll('a')
        anchors.forEach(anchor => {
            anchor.setAttribute('target', '_blank')
        })
</script>

errors when there are hashes in url

Hello,

I have components in the page that are called using hashes (those id/anchors are not inside md), the page loads but I get these errors, my console is bloated with them:

Uncaught DOMException: Failed to execute 'querySelector' on 'DocumentFragment': '#1' is not a valid selector.
at HTMLElement._scrollTo (https://cdn.rawgit.com/zerodevx/zero-md/v1.1.0/build/zero-md.html:1:4077)
    at window.setTimeout (https://cdn.rawgit.com/zerodevx/zero-md/v1.1.0/build/zero-md.html:1:967)

_scrollTo | @ | zero-md.html:1
-- | -- | --
  | window.setTimeout | @ | zero-md.html:1
  | setTimeout (async) |   |  
  | a | @ | zero-md.html:1
  | _fire | @ | zero-md.html:1
  | Promise.all.then | @ | zero-md.html:1
  | Promise.then (async) |   |  
  | render | @ | zero-md.html:1
  | connectedCallback | @ | zero-md.html:1
  | append | @ | swiper.js:634
  | loopCreate | @ | swiper.js:2255
  | h.init | @ | swiper.js:3961
  | h | @ | swiper.js:3854
  | (anonymous) | @ | (index):187

Is there a way to fix it?

Cannot Create Zero-md element with Javascript

I have loaded zero-md from the CDN URLs. It works fine when I just put it in the HTML (like in the docs), but I can't figure out how to create it with javascript. Below is code:

<!Doctype HTML>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@next/dist/zero-md.min.js"></script>
<body>
    <script>
             document.getElementById("toUse") .innerHTML = 
                            `<script type="text/markdown" data-dedent>
                                  Does not work
                            <\/script>`
    </script>
    <div class="container">
        <zero-md style="text-align: center;">
            <!-- Or directly use a script tag with type "text/markdown" -->
            <script type="text/markdown" data-dedent>
                # Hi
                This works fine
            </script>
        </zero-md>
        <br>
        <br>
        <br>
        <zero-md id="toUse"></zero-md> <!-- This does not -->
    </div>
</body>
</html>

One possible solution to this could be having an alternate syntax, maybe:
Or something similar

<zero-md>
    <markdown>
        #Here
    </markdown>
</zero-md>

prism css

is there a way to remove Prism css formatting from the code block?
please advise,

Custom css style

Does anyone have custom style with code, syntax same as github? ie. same code background color, syntax color, etc... as github

Tables don't render

Tables in Github markdown don't render properly.

Automatically re-rendering when inline markdown changes

Hey there!

This is a feature request to add automatic partial re-rendering when the inline markdown changes.

Below is a basic and slightly naive proof of concept in the form of an extension to ZeroMd, just to provide some working code.
Here's the gist of it:

Using a MutationObserver to detect changes in the inline markdown's <script>;
When a change occurs, re-render only the markdown body
- Why not use the existing render()? Because it clears the element's DOM and rebuilds the CSS, which causes an unwanted flash between the old content and the new content.

class ZeroMdExample extends ZeroMd {
  connectedCallback()
  {
    super.connectedCallback();
  
    const script = this.querySelector("script[type='text/markdown']");
  
    if (script) {
      const observer = new MutationObserver(() => this.updateFromInlineContent());
      observer.observe(script, { characterData: true, attributes: true, childList: true, subtree: true });
    }
  }
  
  async updateFromInlineContent (opts = {}) {
    await this.waitForReady();
    const md = await this.buildMd(opts);
    this.shadowRoot.querySelector(".markdown-body").replaceWith(md);
  }
}

There are plenty of optimizations and improvements to be made, of course, but this is a quick suggestion of how it could be handled.

If this seems like a viable way to implement the feature, or if you have any feedback, just let me know - I would gladly get to work on a PR for this.

Cheers!

Not Rendering the math formula inside the markdown file !!

While I can successfully parse other text from markdown on my website, I am finding it difficult to render the math formula written in the markdown file. Is there a way to render those formulas with zero-md?

Throws a Server Error saying ReferenceError: HTMLElement is not defined

Hi, I am trying to integrate this project zero-md into a Next.js project (i.e bibeka.com.np) in order to embed a Markdown file within a html page, but for some reasons the app throws an Server Error saying ReferenceError: HTMLElement is not defined

Here's what I've done/tried

File: markdown.js

// Import the element definition
import ZeroMd from "zero-md";

// Register the custom element
customElements.define("zero-md", ZeroMd);

// Render anywhere
app.render(`<zero-md src=${src}></zero-md>`, target);

and

import ZeroMd from "zero-md";

export default function Markdown() {
  return (
    <ZeroMd src="https://github.com/zerodevx/zero-md/blob/main/README.md"></ZeroMd>
  );
}

and

import ZeroMd from "zero-md";

export default function Markdown() {
  customElements.define("zero-md", ZeroMd);
  return (
    <zero-md src="https://github.com/zerodevx/zero-md/blob/main/README.md"></zero-md>
  );
}

all of this throws the same error

Error displayed

Server Error

ReferenceError: HTMLElement is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:/C:/Users/bibek/arlbibek/bibeka.com.np/node_modules/zero-md/src/index.js (1:29)
ModuleJob.run
node:internal/modules/esm/module_job (195:25)
async ESMLoader.import
node:internal/modules/esm/loader (337:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (437:15)

Not sure if this is an issue or I'm missing something here. 🤔
Please help.

zero-md broken due to "TypeError: window.marked is not a function" error

It seems that zero-md has stopped working today and is throwing the following error:

TypeError: window.marked is not a function
at index.js:214

It's not local to my environment as I've noticed the zero-md webpage is suffering from the same issue.

Support for math equations

GitHub recently announced support for math in TeX & LaTeX syntax. Is there a way the same can be supported by zero-md?

Prism loading issue

Getting some issues with loading Prism.

window.Prism is undefined
and
Cannot read property 'highlightAllUnder' of undefined

The script is added to document.head and loaded, but may be some race condition.

Also would be great in general to have this be a local file as I currently have to allow all of cdn.jsdelivr.net for this.

How should one provide attribution to this project?

I'm blown away of how neat Zero-MD is. I of course want to give proper attribution on my website. Is there any guidelines as to how it is preferred to do so?

zerodevx / zero-md Goto Github PK

zero-md's People

Stargazers

Watchers

Forkers

zero-md's Issues

Throws a Server Error saying ReferenceError: HTMLElement is not defined

Here's what I've done/tried

Error displayed

Recommend Projects

Recommend Topics

Recommend Org