极简 Markdown 阅读器

#Markdown

Safe and Simple Markdown Reader in the Browser
浏览器里的 Markdown 阅读器，极简，安全。

使用浏览器阅读 Markdown 的好处

不需要安装软件
如果你和我一样同时使用 Firefox/Chrome 等多个浏览器，
那么，使用本阅读器就能确保 markdown 文档里的链接在当前浏览器里打开。

极简

只有一个 HTML 文件，包含 HTML CSS JavaScript 一共不到 100 行代码。

安全

不安装软件，不安装浏览器插件，减少危险因素。

自由

真正脱离任何生态。
回归本质, Markdown 文档就是纯文本文档，可以自由地使用任何文本编辑器，
回归本质, Markdown 渲染后就是 HTML, 可以自由地使用任何浏览器。

使用方法

项目地址: https://github.com/ahui2016/ss-markdown-reader/

本 markdown 阅读器就是一个 html 文件，下载该文件后，双击打开即可使用。
打开网页后，拖放 md 文件到网页中即可阅读。

全部代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Reader</title>
  <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
  <style>
  body {
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 100px;
  }
  code {
    color: #c06;
    background-color: #ffe;
  }
  pre, pre>code {
    color: black;
    background-color: #eee;
  }
  </style>
</head>
<body>
  <p><input type="file" id="upload-btn" accept=".md,.txt"></input></p>
  <div id="alert-when-upload" class="alert-danger"></div>
</body>

<script>
"use strict";

const uploadBtn       = $query('#upload-btn');
const alertWhenUpload = $query("#alert-when-upload");
const body            = $query("body");

uploadBtn.addEventListener('change', event => {
  alertWhenUpload.innerText = "";
  const file = event.target.files[0];
  handleFile(file);
});

async function handleFile(file) {
  if (!file) return;
  try {
    // https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
    const md = await file.text();
    const dirty = marked.parse(md);
    const clean = DOMPurify.sanitize(dirty);
    body.innerHTML = clean;
  } catch (error) {
      alertWhenUpload.innerText = "出错： " + error;
  }
}

function $query(selectors) {
  return document.querySelector(selectors);
}

// https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications
const dropbox = $query("html");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  handleFile(e.dataTransfer.files[0]);
}

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
</script>
</html>