selection2md/index.html at main · fghdotio/selection2md · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convert Selection on Web Page to Markdown</title>
    <script type="text/javascript" src="https://unpkg.com/turndown/dist/turndown.js" defer></script>
    <script type="text/javascript" src="index.js" defer></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

        pre {
            overflow: auto;

            /* Preserve white spaces and newlines */
            white-space: pre-wrap;
            /* Ensure long words break correctly */
            word-wrap: break-word;

            code {
                background-color: unset;
            }
        }

        code {
            background-color: #f4f4f4;
            padding: 2px 4px;
            border-radius: 3px;
        }

        blockquote {
            border-left: 4px solid #ccc;
            padding-left: 10px;
            margin-left: 0;
            color: #666;
            font-style: italic;
        }

        ul,
        ol {
            margin: 0 0 1em 1.5em;
        }

        hr {
            border: 0;
            height: 1px;
            background: #333;
            background-image: linear-gradient(to right, #ccc, #333, #ccc);
        }
    </style>
</head>

<body>
    <div>
        <h1>Heading 1</h1>

        <h2>Heading 2</h2>

        <h3>Heading 3</h3>

        <strong>Bold text</strong>

        <em>Italic text</em>

        <strong><em>Bold and Italic</em></strong>

        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
        </ul>

        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
        </ol>

        <img src="https://funfungho.com/apple-touch-icon.png" alt="" aria-label="logo" height="35">

        <a href="https://example.com">Link</a>

        <blockquote>Blockquote</blockquote>

        <code>inline code</code>

        <pre><code>
// This is a code block
function greet(name) {
    console.log('Hello, ' + name + '!');
}

greet('World');</code></pre>

        <!-- <pre data-code-language="rust" data-type="programlisting" class="small"><code class="k">mod</code> <code class="nn">plant_structures</code><code class="w"> </code><code class="p">{</code><code class="w"></code>
    <code class="w">    </code><code class="k">pub</code><code class="w"> </code><code class="k">mod</code> <code class="nn">roots</code><code class="w"> </code><code class="p">{</code><code class="w"></code>
    <code class="w">        </code><code class="p">...</code><code class="w"></code>
    <code class="w">    </code><code class="p">}</code><code class="w"></code>
    <code class="w">    </code><code class="k">pub</code><code class="w"> </code><code class="k">mod</code> <code class="nn">stems</code><code class="w"> </code><code class="p">{</code><code class="w"></code>
    <code class="w">        </code><code class="p">...</code><code class="w"></code>
    <code class="w">    </code><code class="p">}</code><code class="w"></code>
    <code class="w">    </code><code class="k">pub</code><code class="w"> </code><code class="k">mod</code> <code class="nn">leaves</code><code class="w"> </code><code class="p">{</code><code class="w"></code>
    <code class="w">        </code><code class="p">...</code><code class="w"></code>
    <code class="w">    </code><code class="p">}</code><code class="w"></code>
    <code class="p">}</code><code class="w"></code></pre> -->

        <hr />

    </div>

    <div id="selection2md"></div>

    <script>
        window.onload = function () {
            initSelection2md();
        }
    </script>
</body>

</html>