note/markdown.html at master · zmx0142857/note · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown</title>
  <link href="css/markdown.css" rel="stylesheet">
  <link rel="stylesheet" href="css/github-dark.min.css">
<style>
.hljs {
  background-color: transparent;
}
pre {
  position: relative;
}
.btn-copy {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  outline: none;
  border: none;
  background: rgba(80, 80, 80, 0.5);
  color: #ccc;
  width: 50px;
  border-radius: 4px;
  text-align: center;
  padding: 2px;
  user-select: none;
}
pre:hover .btn-copy,
pre:focus .btn-copy {
  display: inline-block;
}
</style>
</head>
<body>
<main id="main">
</main>
<script src="js/markdown-it.min.js"></script>
<script src="js/markdown-it-toc.js"></script>
<script>
// 外链在新标签页打开
const outLink = (md) => {
  md.renderer.rules.link_open = (tokens, idx) => {
    let href = tokens[idx].attrs[0][1]
    if (href.startsWith('http')) {
      return `<a target="_blank" rel="noopener noreferrer" href="${href}">`
    } else if (href.endsWith('.md')) {
      href = href.replace(/^\.\//, 'markdown.html' + location.hash.replace(/\/[^\/]*$/, '/'))
      return `<a href="${href}">`
    } else {
      return `<a href="${href}">`
    }
  }
}

// 代码复制
const copyable = (pre) => {
  const button = document.createElement('button')
  button.className = 'btn-copy'
  button.innerText = '复制'
  button.onclick = () => {
    const text = pre.firstChild.innerText
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    button.innerText = '已复制'
    setTimeout(() => button.innerText = '复制', 3000)
  }
  pre.appendChild(button)
}

const main = async () => {
  const src = window.location.href.split('#')[1]
  const md = markdownit({
    html: true, // enable html in markdown
    linkify: true, // convert url to <a>
  })
  .use(markdownitToc)
  .use(outLink)
  const text = await fetch(src).then(res => res.text()).then(text => {
    return text.replace(/^(#.*\n)?/, ($0) => $0 + '@[toc](目录)\n') // toc
      .replace(/^\[\^(\w+?)\]:/gm, ($0, $1) => `<span id="footnote-${$1}">[${$1}]:</span>`) // footnote
      .replace(/\[\^(\w+?)\]/g, ($0, $1) => `<sup><a href="#footnote-${$1}">[${$1}]</a></sup>`)
  })
  document.querySelector('#main').innerHTML = md.render(text)
  document.querySelectorAll('pre').forEach(pre => copyable(pre))
}

const renderPromise = main()

async function onHljsLoad () {
  await renderPromise
  hljs.highlightAll()
}
</script>
<script onload="onHljsLoad()" src="js/highlight.min.js"></script>
</body>
</html>