tanabe/markdown-live-preview

markdown editor with live preview

Markdown Live Preview

Markdown Live Preview is a tiny web tool to preview Markdown formatted text.

Setup

$ make setup

Build

$ make build

Run local testing server

$ make run

This script requires Python 3.

License

See the LICENSE file in this repo.

markdown-live-preview's Issues

Groups of Lines Indentation

I was using Live Markdown Preview, and I realized you can't indent groups of lines together for code blocks. This would be a fantastic feature.

save to localstorage or export

keyboard shortcut

[Enhancement] Add copy button to preview

Currently a user must manually use their mouse to select all content and then use their keyboard to copy to their clipboard. Adding a single action to do this would streamline the UX.

Firebase でホスティングする

下記を参照して Firebase Hosting を利用する。
https://firebase.google.com/docs/hosting/custom-domain

side by side preview

t/o

Replace plain textarea with Ace editor

Ace is better than plain textarea.

customize CSS

Formatting out of date

There are format elements understood by Reddit at this time that are not being rendered correctly.

e.g.

block
of
text

That is:

three-back-ticks

block

of

text

three-back-ticks

update markdown library

Text wrapping

The markdown live preview site doesn't have text wrapping, so bloggers who use Markdown have to press enter on their keyboards when their paragraph goes past the screen. Maybe this should be fixed?

header fixed bug

Breaks on Copy and Paste

When I pasted a prewritten markdown passage I was working on in my text editor, and tried to copy that passage again, the tab becomes unresponsive, and breaks. I lost all of the work because the page was unrecoverable. It happens when passing the readme attached below

README.md

plz add the flutter source code.

plz add the flutter source code.

migrate http from https

Mathematical expressions in Markdown Live Preview

Mathematical expressions in Markdown Live Preview are not being rendered properly. For example, when using the syntax $O(n)$ --> $O(n)$ to display a mathematical expression, it is not detected or rendered.

Self-XSS

All js between script tags gets executed. I can't easily find a way to use this to attack other users, but it might be best to tame the beast while it is small.

change layout

Please update the recent markdown and ace library

Project up for design refresh?

Hi Guys @tanabe @jeffersonlam @mathisto
I am no code designer

I use this tool very frequently
Want to know if you guys are yup for design changes

I will make it more clean and beautiful + more powerful in terms of UX
I just want approval that yes there is some possibility that we can consider new design

and I will come back with new pull request

Thanks - Looking forward

update markdown-js

Add download button

Adding download button for like as pdf docx or any such file

"Header" as header text isn't handled correctly

When using "Header" as a header, as in # Header, this header gets shown at the top of the site and the actual output window ignores it.

Issue with full links in text section

.

update frontend library

Use vue.js instead of jQuery

Table styles are no longer copied when pasting into Outlook messages.

I liked to generate tables with that special format, copy and paste them into Outlook html messages.

I see that they made some changes, like the github logo no longer appears in the background, now on the upper right side.

But what does affect me is that the table styles are no longer copied.

Could you please return this functionality?

add social buttons

suggestion: Toggle Editor (and also horizontal resizer)

Sometimes I find the "editor" div a bit distracting after I paste in the MarkDown contents, so I wrote some CSS and JS to add a new "Toggle Editor" link to the top button bar, along with a green vertical bar in the middle of the 2 divs that you can drag-resize left or right.

I have only tried this in Chrome on desktop, not yet tested this in mobile etc. But for my needs it works well, I am quite happy with it.

Extra HTML: (added "toggleButton" next to "Copy" button, and added "resizer" div between "edit" and "preview")

  <div id="toggleButton"><a href="#">Toggle Editor</a></div>
...
  <div id="edit">...</div>
  <div id="resizer"></div>
  <div id="preview">...</div>

Extra CSS:

    body {
      margin: 0; /* Remove default margin */
      height: 100vh; /* Ensure full height usage */
      overflow: hidden; /* Prevent body scrollbars */
    }
    #container {
      display: flex;
      width: 100%;
      height: 100%; /* Full height of the parent */
      overflow: hidden;
    }
    #edit, #preview {
      flex-grow: 1;
      overflow: auto; /* Enable scrolling for content overflow */
      transition: flex 0.3s ease;
    }
    #resizer {
      width: 4px; /* Updated resizer width */
      background-color: green;
      cursor: col-resize;
      flex-shrink: 0; /* Prevent shrinking */
    }
    #toggleButton {
      margin-left: 16px; /* Ensure it doesn't overflow to hide */
    }
    .shrunk {
      flex: 0 0 0px !important;
    }

Extra JavaScript:

  const container = document.getElementById("container");
  const edit = document.getElementById("edit");
  const preview = document.getElementById("preview");
  const resizer = document.getElementById("resizer");
  const toggleButton = document.getElementById("toggleButton");
  const MIN_EDIT_WIDTH = 72; // Minimum width for the editor div

  let isMouseDown = false;

  resizer.addEventListener("mousedown", (e) => {
    isMouseDown = true;
    document.addEventListener("mousemove", resize);
    document.addEventListener("mouseup", stopResize);
  });

  function resize(e) {
    if (!isMouseDown) return;
    const containerRect = container.getBoundingClientRect();
    const newEditWidth = e.clientX - containerRect.left;

    if (newEditWidth >= MIN_EDIT_WIDTH) {
      edit.classList.remove("shrunk");
      edit.style.flex = `0 0 ${newEditWidth}px`;
      preview.style.flex = `1 1 auto`;
    }
  }

  function stopResize() {
    isMouseDown = false;
    document.removeEventListener("mousemove", resize);
    document.removeEventListener("mouseup", stopResize);
  }

  function toggleEditor() {
    edit.classList.toggle("shrunk");
  }

  toggleButton.addEventListener("click", toggleEditor);

NOTE: some of the CSS is the result of some back-and-forth tweaking via ChatGPT, so I'm not sure if they are the best way or might cause problems and/or the comments are even accurate, but again it seems to work #GoodEnough for my needs.

HTH!