markdown-live-preview/index.html at main · tanabe/markdown-live-preview · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-language" content="en">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="content-style-type" content="text/css">
    <meta name="description" content="This is the online markdown editor with live preview.">

    <script>
      (function(){
        try {
          var BOOT_THEME_KEY = 'com.markdownlivepreview_theme';
          var raw = localStorage.getItem(BOOT_THEME_KEY);
          var useDark = raw === 'dark';
          document.documentElement.setAttribute('data-theme', useDark ? 'dark' : 'light');

          var PREVIEW_CSS_LIGHT = 'css/github-markdown-light.css?v=1.11.0';
          var PREVIEW_CSS_DARK = 'css/github-markdown-dark_dimmed.css?v=1.11.0';
          var href = useDark ? PREVIEW_CSS_DARK : PREVIEW_CSS_LIGHT;

          var link = document.createElement('link');
          link.id = 'gh-markdown-link';
          link.rel = 'stylesheet';
          link.type = 'text/css';
          link.href = href;
          document.head.appendChild(link);
        } catch (e) {
          // ignore — app will correct theme after load
        }
      })();
    </script>
    <link rel="stylesheet" type="text/css" href="css/style.css?v=1.11.0">
    <link rel="icon" type="image/png" href="favicon.png">
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="module" src="/src/main.js?v=1.11.0"></script>
    <title>Markdown Live Preview</title>
  </head>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-77C1GEG9C8"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-77C1GEG9C8');
  </script>

  <body>

    <header>
        <div id="menu-items">
            <div><a href="/">Markdown Live Preview</a></div>
            <div id="reset-button"><a href="#">Reset</a></div>
            <div id="copy-button"><a href="#">Copy</a></div>
            <div id="export-button"><a href="#">Export PDF</a></div>
            <div id="sync-button">
              <input type="checkbox" id="sync-scroll-checkbox"><label for="sync-scroll-checkbox">Sync scroll</label>
              <span style="margin-left:12px;"><input type="checkbox" id="theme-checkbox"><label for="theme-checkbox">Dark mode</label></span>
            </div>
        </div>
        <div id="github"><a href="https://github.com/tanabe/markdown-live-preview"><img src="image/GitHub-Mark-Light-32px.webp"></a></div>
    </header>

    <div id="container" class="split-container">

        <div id="edit" class="column editor-pane">
            <div id="editor-wrapper">
                <div id="editor"></div>
            </div>
        </div>

        <div id="split-divider" class="split-divider"></div>

        <div id="preview" class="column preview-pane">
            <div id="preview-wrapper">
                <div id="output" class="content markdown-body"></div>
            </div>
        </div>
    </div>

    <footer></footer>
  </body>
</html>