Playground/repl for this plugin #165

vincerubinetti · 2023-02-21T20:18:59Z

vincerubinetti
Feb 21, 2023

I had trouble integrating the plugin into my editor, and I found it cumbersome to use from the prettier CLI, so I made this REPL/playground that you can keep open in another window and copy/paste to/from:

https://jsfiddle.net/jumcv59f/show

code for posterity

<html>
  <head>
    <title>Prettier Liquid Plugin REPL</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        height: 100vh;
        margin: 0;
        padding: 10px;
        background: #202020;
        color: white;
        font-family: sans-serif;
      }

      textarea {
        padding: 10px;
        border: none;
        background: #404040;
        color: white;
        resize: none;
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/prettier/standalone.js"></script>
    <script src="https://unpkg.com/@shopify/prettier-plugin-liquid/standalone.js"></script>

    <textarea id="input" oninput="format()"></textarea>
    <textarea id="output"></textarea>

    <script>
      const input = document.getElementById("input");
      const output = document.getElementById("output");

      prettierPluginLiquid.defaultOptions = {
        printWidth: 80,
        liquidSingleQuote: false,
        embeddedSingleQuote: false,
        proseWrap: "preserve",
      };

      const format = () => {
        output.value = prettier.format(input.value, {
          plugins: [prettierPluginLiquid],
          parser: "liquid-html",
          proseWrap: "preserve",
        });
      };
    </script>
  </body>
</html>

charlespwd · 2023-02-24T16:07:42Z

charlespwd
Feb 24, 2023
Maintainer

Did you try the one we link to on the README?

https://shopify.github.io/prettier-plugin-liquid/

1 reply

vincerubinetti Feb 24, 2023
Author

I did check the readme but I don't know how I didn't see that. Feel free to delete this.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Playground/repl for this plugin #165

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Playground/repl for this plugin #165

vincerubinetti Feb 21, 2023

Replies: 1 comment · 1 reply

charlespwd Feb 24, 2023 Maintainer

vincerubinetti Feb 24, 2023 Author

vincerubinetti
Feb 21, 2023

Replies: 1 comment 1 reply

charlespwd
Feb 24, 2023
Maintainer

vincerubinetti Feb 24, 2023
Author