prettier-plugin-liquid/standalone-demo.html at main · SatelCreative/prettier-plugin-liquid · 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
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <script src="file:///Users/charles/src/github.com/Shopify/prettier-plugin-liquid/node_modules/prettier/standalone.js"></script>
  <script src="file:///Users/charles/src/github.com/Shopify/prettier-plugin-liquid/standalone.js"></script>
  <title>Prettier Liquid Plugin</title>
  <!--
    You may use this file to test the standalone build and make sure everything works in a browser.
    All you need to do is to open this file from your terminal with your browser.

    ```bash
    # macOS
    $ open standalone-demo.html

    # linux
    $ xdg-open standalone-demo.html
    ```
  -->
  <style>
    textarea {
      width: 100ex;
      height: 100ex;
    }
    #stderr {
      width: 200ex;
      height: 30ex;
    }
  </style>
</head>

<body>
  <textarea id="input" placeholder="Unformatted input">
&lt;ul&gt;{% for el in col %}&lt;li class=&quot;{% cycle &#39;odd&#39;, &#39;even&#39; %}&quot; id=&quot;el-{{ el.index }}&quot;&gt;{{ el.image }}&lt;/li&gt;{% endfor %}&lt;/ul&gt;

&lt;ul class=&quot;container&quot;&gt;
{% for el in col %}&lt;li class=&quot;{% cycle &#39;odd&#39;, &#39;even&#39; %}&quot; id=&quot;something&quot; data-prop=&quot;some value&quot;&gt;
  &lt;div class=&quot;item-container&quot;&gt;  &lt;label&gt;{{ el.value }}&lt;/label&gt;
   {{ el.featured_image | image_url | image_tag }}
      &lt;/div&gt;
    &lt;/li&gt; {% endfor %}
&lt;/ul&gt;
  </textarea>
  <textarea id="output" placeholder="Prettified output" readonly></textarea>
  <textarea id="stderr" placeholder="Error output" readonly></textarea>

  <script>
    function format() {
      try {
        output.value = prettier.format(input.value, {
          plugins: [prettierPluginLiquid],
          parser: 'liquid-html',
        });
        stderr.value = '';
      } catch (error) {
        stderr.value = error.stack || error;
      }
    }

    function onKeyup(e) {
      if (e.ctrlKey && event.key === 'f') {
        input.value = output.value;
      }
    }

    format();
    input.oninput = format;
    input.addEventListener('keyup', onKeyup)
  </script>
</body>