diff --git a/README.md b/README.md
index 2664d3caa..bccc82078 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# LiquidJS
-A simple, expressive [Shopify Liquid][shopify/liquid] template engine for JavaScript — compatible with Jekyll and GitHub Pages dialects, runs in Node.js, the browser (UMD/ESM), and the CLI via `npx liquidjs`, and ships with TypeScript definitions. Extend it with custom tags, filters, and [plugins][plugins]; optional `memoryLimit`, `renderLimit`, and `ownPropertyOnly` help harden untrusted templates (not a sandbox — see the [security model][security-model]).
+A simple, expressive [Shopify Liquid][shopify/liquid] template engine for JavaScript — Jekyll and GitHub Pages compatible, for Node.js, browsers, and the CLI, with TypeScript support.
[](https://www.npmjs.org/package/liquidjs)
[](https://www.npmjs.org/package/liquidjs)
@@ -244,10 +244,8 @@ Want to contribute? see [Contribution Guidelines][contribution]. Thanks goes to
[MIT](LICENSE) © [Jun Yang](https://github.com/harttle)
[shopify/liquid]: https://shopify.github.io/liquid/
-[plugins]: https://liquidjs.com/tutorials/plugins.html#Plugin-List
[setup]: https://liquidjs.com/tutorials/setup.html
[doc]: https://liquidjs.com
[github]: https://github.com/harttle/liquidjs
[oc]: https://opencollective.com/liquidjs/
[contribution]: https://liquidjs.com/tutorials/contribution-guidelines.html
-[security-model]: https://liquidjs.com/tutorials/security-model.html
diff --git a/docs/source/playground-demo.gif b/docs/source/playground-demo.gif
index ddaa9cc1f..8fbbce3b0 100644
Binary files a/docs/source/playground-demo.gif and b/docs/source/playground-demo.gif differ
diff --git a/docs/themes/navy/layout/partial/after_footer.swig b/docs/themes/navy/layout/partial/after_footer.swig
index 2bf8faba3..1e77922b0 100644
--- a/docs/themes/navy/layout/partial/after_footer.swig
+++ b/docs/themes/navy/layout/partial/after_footer.swig
@@ -4,8 +4,6 @@
-
-
{% endif %}
{{ js('js/main') }}
diff --git a/docs/themes/navy/source/css/_partial/highlight.styl b/docs/themes/navy/source/css/_partial/highlight.styl
index dc7254e83..86c77609c 100644
--- a/docs/themes/navy/source/css/_partial/highlight.styl
+++ b/docs/themes/navy/source/css/_partial/highlight.styl
@@ -121,40 +121,3 @@ pre
color: var(--highlight-bash-command)
.operator
color: var(--highlight-purple)
-
-// Prism (playground output) — uses palette tokens for light/dark
-code[class*="language-"]
- color: var(--highlight-foreground)
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata
- color: var(--highlight-comment)
- .token.punctuation
- color: var(--highlight-foreground)
- .token.property,
- .token.tag,
- .token.boolean,
- .token.number,
- .token.constant,
- .token.symbol,
- .token.deleted
- color: var(--highlight-red)
- .token.attr-name,
- .token.selector,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted
- color: var(--highlight-green)
- .token.attr-value,
- .token.regex,
- .token.variable
- color: var(--highlight-blue)
- .token.operator,
- .token.entity,
- .token.url
- color: var(--highlight-aqua)
- .token.atrule,
- .token.keyword
- color: var(--highlight-purple)
diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl
index 876c6466d..38d386311 100644
--- a/docs/themes/navy/source/css/_partial/playground.styl
+++ b/docs/themes/navy/source/css/_partial/playground.styl
@@ -1,6 +1,7 @@
#playground
--playground-gap: 12px
--playground-radius: 10px
+ --playground-inset: 16px
background: var(--color-content-bg)
overflow: hidden
box-shadow: var(--panel-shadow)
@@ -124,7 +125,7 @@
gap: 10px
flex-shrink: 0
height: 36px
- padding: 0 12px
+ padding: 0 var(--playground-inset)
border-bottom: 1px solid var(--code-border)
@media mq-mobile
height: 32px
@@ -151,9 +152,32 @@
min-width: 0
display: flex
flex-direction: column
- overflow: visible
+ overflow: hidden
background: var(--highlight-background)
+ .area-tpl .pane-body,
+ .area-data .pane-body
+ padding: var(--playground-inset)
+ box-sizing: border-box
+ @media mq-mobile
+ padding: 12px
+
+ .area-tpl .ace_gutter,
+ .area-data .ace_gutter
+ display: none !important
+ width: 0 !important
+ min-width: 0 !important
+
+ .area-tpl .ace_editor,
+ .area-data .ace_editor,
+ .area-tpl .ace_scroller,
+ .area-data .ace_scroller,
+ .area-tpl .ace_content,
+ .area-data .ace_content,
+ .area-tpl .ace_text-layer,
+ .area-data .ace_text-layer
+ background: transparent !important
+
.editor
flex: 1 1 auto
min-height: 0
@@ -175,7 +199,7 @@
min-height: 100%
width: 100%
box-sizing: border-box
- padding: 16px
+ padding: var(--playground-inset)
border: none
box-shadow: none
border-radius: 0
@@ -194,6 +218,7 @@
font-family: font-mono
font-size: 14px
line-height: 1.55
+ color: var(--highlight-foreground)
background: transparent
padding: 0
white-space: inherit
diff --git a/docs/themes/navy/source/js/main.js b/docs/themes/navy/source/js/main.js
index 3f2ac62a3..7be71a58a 100644
--- a/docs/themes/navy/source/js/main.js
+++ b/docs/themes/navy/source/js/main.js
@@ -38,7 +38,7 @@
(function() {
// playground
- /* global liquidjs, ace, Prism */
+ /* global liquidjs, ace */
if (!/\/playground(?:\.html)?$/.test(location.pathname)) return;
updateVersion(liquidjs.version);
const engine = new liquidjs.Liquid({
@@ -86,6 +86,8 @@
function applyEditorTheme(editor) {
editor.setTheme(getEditorTheme());
+ editor.renderer.setPadding(0);
+ editor.container.style.background = 'transparent';
}
function createEditor(id, lang) {
@@ -103,7 +105,10 @@
});
editor.getSession().setMode('ace/mode/' + lang);
editor.renderer.setShowGutter(false);
- editor.renderer.setScrollMargin(8, 8, 0, 0);
+ if (editor.renderer.$gutter) {
+ editor.renderer.$gutter.style.display = 'none';
+ }
+ editor.renderer.setScrollMargin(0, 0, 0, 0);
bindClipboard(editor);
return editor;
}
@@ -163,10 +168,6 @@
function setPreview (value) {
previewValue = value
previewCode.textContent = value
- if (window.Prism) {
- delete previewCode.dataset.highlighted
- window.Prism.highlightElement(previewCode)
- }
}
async function update() {
@@ -177,7 +178,7 @@
const html = await engine.parseAndRender(tpl, JSON.parse(data));
setPreview(html);
} catch (err) {
- setPreview(err.stack);
+ // keep last successful output while template or context is invalid
}
}