mirror of
https://github.com/catppuccin/catppuccin
synced 2024-09-20 06:22:04 +00:00
285 lines
8.1 KiB
Text
285 lines
8.1 KiB
Text
doctype html
|
|
- var em_sometext = "<em>some text</em>"
|
|
-var var2 = 'no spaces after -'
|
|
_test = [{abc: "lalal"}]
|
|
name = function() {}
|
|
|
|
html
|
|
head
|
|
script#idscript.script(type="text/javascript", qwerqwer)(test="123", lol=(1+
|
|
1), other).
|
|
var la = lala;
|
|
|
|
function script(arg1, arg2) {
|
|
console.log("string", arg1, arg2);
|
|
}
|
|
|
|
console.log(script(la, "string3"));
|
|
|
|
|
|
style(type="text/css").
|
|
.test-cls {
|
|
float: left;
|
|
color: #000;
|
|
}
|
|
|
|
div.saf {
|
|
background-color: red;
|
|
}
|
|
|
|
link(rel="stylesheet", href="asdiofjs.css")
|
|
|
|
body
|
|
mixin lala(abc, lala)
|
|
div.lala-output(style="background-color: #ccc") lala output
|
|
ul
|
|
li.abc= null + abc
|
|
li.lala= lala
|
|
|
|
div mixin long call
|
|
mixin lala((123+{asdf:(1+1)}), "mixin long call")strong after lontg mixinty use
|
|
|
|
.test + mixin use
|
|
+lala(123, "mixin + call 1")
|
|
|
|
mixin another()
|
|
- console.log(attributes)
|
|
input&attributes({cde: 3434})(ccc=343)&attributes(attributes).cls&attributes([1,2,'no'])
|
|
|
|
.test mixin attributes new syntax
|
|
+another(abc=123, bcd='lol')
|
|
|
|
mixin mix2()
|
|
div: p.mix2
|
|
block
|
|
|
|
+mix2(): p paragraph in mix2
|
|
|
|
mixin mix2() mix2tag lol
|
|
|
|
mixin mix3()
|
|
div: p.mix3
|
|
|
|
+mix3().mix2class It's time
|
|
|
|
.98349 class name omly numbers
|
|
._[invalid character in class name should result in it and text following be considered text
|
|
|
|
// some html comment
|
|
p.
|
|
this is some text inside the p tag
|
|
since it is only a html comment, pug will render it normally
|
|
|
|
div
|
|
p: iv:asd-_FD tag name weird &characters
|
|
p
|
|
asdf: ab:[this should be text
|
|
|
|
tstr = 'strong'
|
|
#{tstr} iterpolated tag name
|
|
|
|
pre
|
|
em this is inside 'em' tag <br/>
|
|
|
|
[this is rendered as standalone text
|
|
##this too
|
|
"this too"
|
|
|
|
div(style="background-color: #eef") some examples of dot text blocks bellow:
|
|
|
|
#{'di' + 'v'}: em.
|
|
some text block inside tag with interpolated name and subtag
|
|
|
|
.lol: strong(prop="()(())").
|
|
another block of text, this time the tag has parenthesis inside
|
|
a tag property value that is a string
|
|
|
|
#test(abc="asdfsdf").
|
|
another case of text block
|
|
|
|
div.class.another: p.red(style="").asdfsd(lol=123)#ohno.
|
|
another case of text block with interpolated text: #{10*100}
|
|
|
|
div: [this will be text
|
|
p.
|
|
and this will be a text block
|
|
inside a p tag
|
|
|
|
#{'d' + 'i' + 'v'}}.
|
|
em this should be italic because it is not a text block, and start the line with '}.'
|
|
|
|
p a tag with text ending in dot.
|
|
strong and child tags to show that the dot text block detection is
|
|
em working
|
|
|
|
div: div: thisisavar = 'THIS_IS_A_VARIABLE'
|
|
= 'thisisavar is a variable declaration as demonstrated here: ' + thisisavar
|
|
|
|
sub2: tag2: -console.log('unbuffered js inside subtag?')
|
|
|
|
p#-tagid.-sdfa tag ids and classes with valid characters
|
|
|
|
p this tag has <em>embedded html #{console}</em>
|
|
|
|
textblock.
|
|
<div style="color: red;">
|
|
<p>this is embedded html in dot text block with a interpolated value: #{'te'+'st'+1}</p>
|
|
</div>
|
|
|
|
<div style="color: green;">
|
|
<p>this is directly embedded html with a interpolated value: #{'te'+'st'+2}</p>
|
|
</div>
|
|
|
|
emb
|
|
div regular tag and text
|
|
| <div style="color: blue;">
|
|
| <p>this is embedded html in pipe text with a interpolated value: #{'te'+'st'+2}</p>
|
|
| </div>
|
|
|
|
p: em(sdf-+a\||.asd=123, type="te\x98t\u8876",lol,
|
|
lol2
|
|
lol3, abc = _test, fdg=console.log(123, (1 + (1 + 2)), undefined || true && "sdf#{1+1}asdf")
|
|
asdf, bcd=[123, [_test, {asdf: console.log(123)}]], afd={a: 1+1, 'b': {c: (null)}}
|
|
style="background-color: #ccc;") this is a tag with all sorts of crazy properties properly highlighted
|
|
|
|
p(qwer,|asdf, zxcv, poiu)= console + NaN
|
|
|
|
p: em(sdf-+a\||.asd=123 + undefined | 64 type="te\x98t\u8876" lol
|
|
lol2
|
|
lol3 abc = _test fuuuuu fdg=console.log(123, (1 + (1 + 2)), undefined || true && "sdf#{1+1}asdf")
|
|
asdf bcd=[123, [_test, {asdf: console.log(123)}]] faaaaaa afd={a: 1+1, 'b': {c: (null)}} lol4=sdf+sdf lastattr
|
|
style="background-color: #ccc;") new attributes without commas
|
|
|
|
p(qwer |asdf zxcv lol=123 * 0 || Math + "sdf") attributes no commas
|
|
|
|
p(aprop).lol.lil#theid(style="background-color: black; color: white;").lul(anotherprop='TEST')
|
|
| tag with any combination/order of id/classes/attributes
|
|
|
|
include page
|
|
|
|
block testblock1
|
|
div.lala-block this is in testblock1
|
|
yield
|
|
|
|
div.lala-block-test
|
|
block prepend testblock1
|
|
div.lala-prepend line1
|
|
| line2
|
|
|
|
append testblock1
|
|
div.lala-append line1
|
|
| line2
|
|
yield
|
|
|
|
div a list generated in a loop as subtag code:
|
|
ul: - for i in [1,2,3,null]
|
|
li= i
|
|
|
|
div a list generated in another loop as subtag code:
|
|
ul: for i in [1,2,3,null]
|
|
li= i
|
|
|
|
div(style="color: red;"): append testblock1
|
|
|
|
div(style="color: green;"): include page
|
|
|
|
div(style="color: blue;"): mixin lala
|
|
|
|
|
|
if true
|
|
p conditional text
|
|
else
|
|
p and this won't show
|
|
|
|
friends = 10
|
|
case friends
|
|
when 0
|
|
p you have no friends
|
|
when (1+(1+1)): p you have a friend
|
|
default: p you have #{friends} friends
|
|
|
|
h1 title
|
|
|
|
p= console.log("logging before text") || 'after console.log'
|
|
|
|
#div
|
|
label
|
|
| Username1:
|
|
input(type="text")
|
|
|
|
label Username2:
|
|
input(type="text")
|
|
|
|
p unescaped and escaped variable:
|
|
div!= em_sometext
|
|
div= em_sometext
|
|
#test(abc="lala", lele=9, lili=em_sometext) the variable used as property value
|
|
.class interpolated escaped and unescaped variable: #{em_sometext + "&"} and !{em_sometext}} \#{this will show}
|
|
|
|
p some text // not some comment
|
|
|
|
a(href="lala", something=em_sometext,) some link
|
|
|
|
div: span: em= 'extra spaces between tags and js output'
|
|
|
|
div(style="background-color: #ccf;"): p:.a subtag without spaces will work only if id or class is used directly.
|
|
p: em and this will be a part of it
|
|
|
|
p='output without spaces separating tag: ' + em_sometext
|
|
|
|
//-
|
|
this is an unbuffered comment
|
|
it will never show on the html
|
|
|
|
and here to test skipping a line with less spaces than the indent level
|
|
|
|
div.class.another#someid: a(href=em_sometext, test="la\"sdafla", style="display: block; width: 100px; height: 10px"): p.red(style="") some lalalalal
|
|
|
|
p
|
|
multi.line tag with pipe lines,
|
|
| like this first #{em_sometext + "aosidjfsd" + 0 + undefined} ending here.
|
|
| <br/> more pure text breaking the line with embedded html
|
|
|
|
p Test inline mixin #[+lala(123, 'lala inside inline')] end
|
|
p Here is some #[strong: em text] and look at #[a(href='http://google.com') this link!]
|
|
p Here is some #[.strong: em text] and look at #[a(href='http://google.com') this link!]
|
|
p Other inline #[strong= 'test']
|
|
p Test #[|text line]
|
|
p Test buffered #[= console.log('inline tag code') + 'inline code']
|
|
p Test unbuffered #[- console.log('inline tag code') + 'inline code']
|
|
p #[- abcf = [[123, [[],[]], []],'abc']] #[= abcf]
|
|
p Crazy #[em: strong #[span #[='inline']]: test]
|
|
p We can also #[strong combine #[em multiple #[img(src='http://pug-lang.com/style/logo.png')]]]
|
|
p Another #[strong.lil#okf(acs=[1,2]) test [[with brackets]] [in#[='side']]]
|
|
#[strong start] line with #[i]\#[j] inline
|
|
#[#[#[#[#[i a] b] c] d]e]
|
|
#[asdf.lol(fff)#[asdf]]
|
|
|
|
p.
|
|
block with #[i inline] tag.
|
|
|
|
| pipe text with #[i inline] tag.
|
|
|
|
!{'tag' + 234} text line starting with interpolated
|
|
[!{sdfasdf}
|
|
##{sadf} lol2
|
|
"#[asdf]"
|
|
|
|
- var left_wrapper = 'p'
|
|
- var left_classes = 'one two'
|
|
- var left = 'the content'
|
|
p this is not a code block
|
|
|
|
-
|
|
var peeps = ["Mathias", "David", "Github"];
|
|
|
|
var msg = peeps.map(function(name) {
|
|
return "Hi " + name
|
|
}).join(", ");
|
|
|
|
<#[span test inline in brackets]>
|
|
|
|
div
|
|
<#{left_wrapper}.lol#dsfsdf class="group-left !{left_classes}">
|
|
!= left
|
|
</!{left_wrapper}>
|