-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathplayground.html
More file actions
104 lines (96 loc) · 5.61 KB
/
playground.html
File metadata and controls
104 lines (96 loc) · 5.61 KB
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
<!--
A Hugo shortcode template (https://gohugo.io/templates/shortcode/), not just plain HTML.
# Usage
The current version can only be used once per page because it uses IDs which work well as link targets but have this side effect.
Surrounds mandatory h3s heading each section, where each section contains h4 then pre repeated, with h4 containing
the name of a preset demo, with an ID playground-preset-name where name is a unique ID, and pre containing the HTML
code of the demo.
(This website uses progressive enhancement a lot. You'll see the code-input element works well with it, like the code as mentioned above, which is placed in pre elements for HTML-only support and then is transformed to an interactive demo at little extra cost.)
All the code of this website is Copyright (c) 2025 Oliver Geer and contributors and licensed MIT/Expat.
-->
<!--Import highlight.js-->
<!--Guide: https://highlightjs.org/#usage#:~:text=As%20HTML%20Tags-->
{{ with resources.Get "lib/@highlightjs/cdn-assets/build/styles/a11y-light.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" media="(prefers-color-scheme: light)">
{{ end }}
{{ with resources.Get "lib/@highlightjs/cdn-assets/build/styles/a11y-dark.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" media="(prefers-color-scheme: dark)">
{{ end }}
<!--You can also choose custom themes by changing "default" above to the theme name from https://highlightjs.org/playground-->
{{ with resources.Get "lib/@highlightjs/cdn-assets/build/highlight.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
<!--Import highlight.js languages-->
<!--You can copy this line to import additional languages, replacing "html" with a language name from https://highlightjs.org/playground.-->
{{ with resources.Get "lib/@highlightjs/cdn-assets/build/languages/html.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
<!--Import code-input-->
<!--The same goes for downloaded versions.-->
{{ with resources.Get "lib/@webcoder49/code-input/code-input.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
{{ with resources.Get "lib/@webcoder49/code-input/code-input.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
<!--Plugins used here for URL interaction-->
{{ with resources.Get "lib/@webcoder49/code-input/plugins/autocomplete.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
{{ with resources.Get "lib/@webcoder49/code-input/plugins/autocomplete.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
<!--Keystroke plugins-->
{{ with resources.Get "lib/@webcoder49/code-input/plugins/auto-close-brackets.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
{{ with resources.Get "lib/@webcoder49/code-input/plugins/indent.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
<!--Code tool plugins-->
{{ with resources.Get "lib/@webcoder49/code-input/plugins/find-and-replace.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
{{ with resources.Get "lib/@webcoder49/code-input/plugins/find-and-replace.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
{{ with resources.Get "lib/@webcoder49/code-input/plugins/go-to-line.min.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}
{{ with resources.Get "lib/@webcoder49/code-input/plugins/go-to-line.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
<form id="playground-presets-form" style="display: none;"></form>
<div id="playground-presets-fallback">
<noscript><p>You've got JavaScript disabled. You'll see the code-input element's no-JavaScript fallback.</p></noscript>
{{ .Inner | markdownify }}
</div>
<code-input id="playground-in" template="playground-in" language="HTML" oninput="if(!document.getElementById('playground-message').open) updateDemo();"><textarea data-code-input-fallback></textarea></code-input>
<dialog id="playground-message" open closedby="none" onclose="updateDemo();">
<form method="dialog">
<p>This demo's editor uses code-input.js; its implementation can be found by inspecting, or is here: <a href="https://github.com/code-input-js/website/blob/main/layouts/_shortcodes/playground.html">HTML</a>, <a href="https://github.com/code-input-js/website/tree/main/assets/_shortcodes/playground.js">CSS</a>, <a href="https://github.com/code-input-js/website/tree/main/assets/_shortcodes/playground.css">JavaScript</a> (all on GitHub).</p>
<p>For convenience and portability of code, the default code above uses external resources from <a href="https://jsdelivr.com">JSDelivr CDN</a>.</p>
<p>In production, for more privacy and security you can download and host them yourself.</p>
<p>OK with loading them?</p>
<input type="submit" value="Click to View Result."></input> (editing afterwards will live-update)
</form>
</dialog>
<iframe id="playground-out" style="resize: both; display: none;" href="data:text/html,Loading"></iframe>
{{- with resources.Get "_shortcodes/playground.js" }}
{{- if hugo.IsDevelopment }}
<script defer src="{{ .RelPermalink }}"></script>
{{- else }}
{{- with . | minify | fingerprint }}
<script defer src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{- end }}
{{- end }}
{{- end }}
{{- with resources.Get "_shortcodes/playground.css" }}
{{- if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }}
{{- with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }}