-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
773 lines (758 loc) · 98.1 KB
/
index.html
File metadata and controls
773 lines (758 loc) · 98.1 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Jevko</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="/style.css?stamp=1704255108590" />
<link rel="stylesheet" href="/highlight/style.css?stamp=1704255108590" />
<link rel="icon" type="image/png" href="/jevko.png" />
<meta name="og-image" property="og:image" content="/jevko.png" />
<meta name="twitter:image" content="/jevko.png" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<header id="top" class="top black-bg">
<div class="header">
<a href="/index.html">
<img class="logo" src="/jevko.png" alt="logo" />
</a>
<div class="right links" style="flex-grow: 1">
<div>
<a href="https://jevko-org.translate.goog/?_x_tr_sl=en&_x_tr_tl=zh-TW&_x_tr_hl=en" title="Click here to Google Translate jevko.org"><!--
--><img src="/translate_icon.svg" style="width: 2.5rem;" alt="[^translate]" /><!--
--></a>
<a href="https://xtao.org" title="Click here to go to xtao.org, the parent page of jevko.org"><!--
--><img src="/tao-logo.svg" style="width: 2.5rem;" alt="[^TAO]" /><!--
--></a>
</div>
<div>
<a href="https://archive.org/details/@jevko" title="Click here to go to the official Jevko archive.org profile"><!--
--><img src="/archive_icon.svg" style="width: 2.5rem;" alt="[^archive]" /><!--
--></a>
<a href="https://www.youtube.com/@jevko-org" title="Click here to go to the official Jevko YouTube channel"><!--
--><img src="/youtube_icon.svg" style="width: 2.5rem;" alt="[^youtube]" /><!--
--></a>
<a href="https://codeberg.org/jevko-org" title="Click here to go to the official Jevko Codeberg organization"><!--
--><img src="/codeberg_icon.svg" style="width: 2.5rem;" alt="[^codeberg]" /><!--
--></a>
<a href="https://github.com/jevko" title="Click here to go to the official Jevko GitHub organization"><!--
--><img src="/github_icon.svg" style="width: 2.5rem;" alt="[^github]" /><!--
--></a>
<a rel="me" href="https://layer8.space/@jevko" title="Click here to go to the official Jevko Mastodon channel"><!--
--><img src="/mastodon_icon.svg" style="width: 2.5rem;" alt="[^mastodon]" /><!--
--></a>
<a href="https://reddit.com/r/jevko" title="Click here to go to the official Jevko subreddit"><!--
--><img src="/reddit_icon.svg" style="width: 2.5rem;" alt="[^reddit]" /><!--
--></a>
<a href="https://layer8.space/@jevko.rss" title="Click here to download the official Jevko RSS channel"><!--
--><img src="/rss_icon.svg" style="width: 2.5rem;" alt="[rss]" /><!--
--></a>
</div>
<div>
<a href="/spec.html" title="Click here to go to see the official Jevko speficication">[specification]</a>
<a href="/diagram.xhtml" title="Click here to see the official Jevko syntax railroad diagrams">[diagrams]</a>
<a href="/extensions.html" title="Click here to go to see the official Jevko extensions specification">[extensions]</a>
<!-- <a href="/license.html" title="Click here to see the license Jevko is available under">[license]</a> -->
</div>
</div>
</div>
</header>
<header id="title-block-header">
<h1 class="title">Jevko</h1>
</header>
<style>
.jevko {
background-color: #1f1f1f;
color: #cccccc;
}
.content {
/* text-decoration: underline 0.25px dotted rgb(136, 136, 136); */
}
.attr > .tag {
color: #94dcfe;
}
.elem > .tag {
/* color: greenyellow; */
color: #97d656;
/* color: #569cd6; */
}
.attr .text:last-of-type {
/* color: lightsalmon; */
color: #ce9178;
}
.level-0 > .bracket {
color: rgb(255, 215, 4);
/* color: #f89902; */
}
.level-1 > .bracket {
/* color: #b06db9; */
color: rgb(218, 112, 214);
}
.level-2 > .bracket {
color: rgb(24, 157, 255);
/* color: #0e8af8; */
}
pre {
padding: 1rem;
}
</style>
<style>
.main {
background-color: #1f1f1f;
color: #cccccc;
padding: 1rem;
margin: 0.5rem;
overflow: auto;
}
.view-line {
white-space: pre;
}
.mtk1 { color: #cccccc; }
.mtk2 { color: #1f1f1f; }
.mtk3 { color: #cc6666; }
.mtk4 { color: #fbcab6; }
.mtk5 { color: #9cdcfe; }
.mtk6 { color: #ce9178; }
.mtk7 { color: #d4d4d4; }
.mtk8 { color: #b5cea8; }
.mtk9 { color: #ffd700; }
.mtk10 { color: #608b4e; }
.mtk11 { color: #569cd6; }
.mtk12 { color: #dcdcdc; }
.mtk13 { color: #808080; }
.mtk14 { color: #f44747; }
.mtk15 { color: #c586c0; }
.mtk16 { color: #a79873; }
.mtk17 { color: #dd6a6f; }
.mtk18 { color: #5bb498; }
.mtk19 { color: #909090; }
.mtk20 { color: #778899; }
.mtk21 { color: #ff00ff; }
.mtk22 { color: #b46695; }
.mtk23 { color: #ccffff; }
.mtk24 { color: #ff0000; }
.mtk25 { color: #86ccff; }
.mtk26 { color: #4f76ac; }
.mtk27 { color: #3dc9b0; }
.mtk28 { color: #74b0df; }
.mtk29 { color: #4864aa; }
.mtki { font-style: italic; }
.mtkb { font-weight: bold; }
.mtku { text-decoration: underline; text-underline-position: under; }
.mtks { text-decoration: line-through; }
.mtks.mtku { text-decoration: underline line-through; text-underline-position: under; }
.bracket-highlighting-0 { color: #ffd700; }
.bracket-highlighting-1 { color: #da70d6; }
.bracket-highlighting-2 { color: #179fff; }
.bracket-highlighting-3 { color: #ffd700; }
.bracket-highlighting-4 { color: #da70d6; }
.bracket-highlighting-5 { color: #179fff; }
.bracket-highlighting-6 { color: #ffd700; }
.bracket-highlighting-7 { color: #da70d6; }
.bracket-highlighting-8 { color: #179fff; }
.bracket-highlighting-9 { color: #ffd700; }
.bracket-highlighting-10 { color: #da70d6; }
.bracket-highlighting-11 { color: #179fff; }
.bracket-highlighting-12 { color: #ffd700; }
.bracket-highlighting-13 { color: #da70d6; }
.bracket-highlighting-14 { color: #179fff; }
.bracket-highlighting-15 { color: #ffd700; }
.bracket-highlighting-16 { color: #da70d6; }
.bracket-highlighting-17 { color: #179fff; }
.bracket-highlighting-18 { color: #ffd700; }
.bracket-highlighting-19 { color: #da70d6; }
.bracket-highlighting-20 { color: #179fff; }
.bracket-highlighting-21 { color: #ffd700; }
.bracket-highlighting-22 { color: #da70d6; }
.bracket-highlighting-23 { color: #179fff; }
.bracket-highlighting-24 { color: #ffd700; }
.bracket-highlighting-25 { color: #da70d6; }
.bracket-highlighting-26 { color: #179fff; }
.bracket-highlighting-27 { color: #ffd700; }
.bracket-highlighting-28 { color: #da70d6; }
.bracket-highlighting-29 { color: #179fff; }
</style>
<h1>
simple syntax
</h1>
<p><strong>Jevko</strong> (<a
href="#etymology-and-pronunciation">/ˈd͡ʒef.kəʊ/</a>) is a versatile
minimal syntax for encoding tree-structured information as
human-friendly text.</p>
<p>It can be used as a building block for simple formats, languages, and
notations across a variety of domains.</p>
<p><a href="#jdaml">Jevko Data And Markup Language
(<strong>JDAML</strong>)</a> is an XML-like format built on Jevko that
works equally well for data interchange, configuration, <em>and</em>
text markup.</p>
<h1 id="for-users-jdaml">For users: JDAML</h1>
<p>Check out <a href="#jdaml">JDAML</a> you are interested in a
ready-made minimal and simple unified format that can be a complement or
an alternative to formats such as HTML, XML, JSON, YAML, TOML, etc.</p>
<h1 id="for-hackers-jevko">For hackers: Jevko</h1>
<p>Check out <a href="#plain-jevko">plain Jevko</a> if you are a hacker,
minimalist, language or format designer, or are looking for an extremely
minimal and simple text-based representation for trees.</p>
<p><a name="jdaml"></a></p>
<h1 id="jevko-data-and-markup-language">Jevko Data And Markup
Language</h1>
<div style="font-family: monospace; text-align: center;">
<p><a href="#data-interchange">[#data]</a> <a
href="#configuration">[#config]</a> <a
href="#text-markup">[#markup]</a></p>
</div>
<p>JDAML (Jevko Data And Markup Language) is an experimental XML-like
format built on top of Jevko, designed to map equally well to
markup-oriented formats (such as HTML or XML) and data-oriented formats
(such as JSON or YAML).</p>
<p>It can serve as a unified, lean, flexible, and human-friendly
representation of these formats, can be mixed with them, or can be used
alone.</p>
<p>Below are a few examples of mapping JDAML to and from formats in
various domains.</p>
<p><a name="data"></a></p>
<h2 id="data-interchange">Data interchange<a href="#fn1"
class="footnote-ref" id="fnref1"
role="doc-noteref"><sup>1</sup></a></h2>
<div style="text-align: center; font-family: monospace;">
<p><a href="https://jevko.github.io/jdaml/#json">[see the example
live]</a></p>
</div>
<div class="comparison black-bg">
<div>
<h1>JDAML:JSON</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">first-name</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk6">John</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">last-name</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk6">Smith</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">is-alive</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">true</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">age</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">u8</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk1">27</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">address</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">street-address</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">21 2nd Street</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">city</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">New York</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">state</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">NY</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">postal-code</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">10021-3100</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">phone-numbers</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">type</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">home</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">number</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">212 555-1234</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">type</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">office</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">number</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">646 555-4567</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">children</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">seq</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">spouse</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">nil</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div></div>
</div>
<div>
<h1>JSON:JDAML</h1>
<div style="position: ; font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px; width: ; height: ;" role="presentation" aria-hidden="true" data-mprt="7" class="main view-lines monaco-mouse-cursor-text"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"first-name"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"John"</span><span class="mtk13">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"last-name"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"Smith"</span><span class="mtk13">,</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"is-alive"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk11">true</span><span class="mtk13">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"age"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk8">27</span><span class="mtk13">,</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"address"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">{</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"street-address"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"21 2nd Street"</span><span class="mtk13">,</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"city"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"New York"</span><span class="mtk13">,</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"state"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"NY"</span><span class="mtk13">,</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"postal-code"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"10021-3100"</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">}</span><span class="mtk13">,</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"phone-numbers"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">{</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"type"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"home"</span><span class="mtk13">,</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"number"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"212 555-1234"</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">}</span><span class="mtk13">,</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">{</span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"type"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"office"</span><span class="mtk13">,</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"number"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"646 555-4567"</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">}</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13">,</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"children"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13">,</span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"spouse"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk11">null</span></span></div><div style="top:437px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">}</span></span></div></div>
</div>
</div>
<div
style="text-align: center; font-family: monospace; margin-top: 5rem;">
<p><a href="https://jevko.github.io/jdaml/#xml">[see the example
live]</a></p>
</div>
<div class="comparison black-bg">
<div>
<h1>JDAML:XML</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">first-name</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk6">John</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">last-name</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk6">Smith</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">is-alive</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">true</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">age</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">u8</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk1">27</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">address</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">street-address</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">21 2nd Street</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">city</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">New York</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">state</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">NY</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">postal-code</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">10021-3100</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">phone-numbers</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">type</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">home</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">number</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">212 555-1234</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">type</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">office</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">number</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">646 555-4567</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">children</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">seq</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">spouse</span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk13">'</span><span class="mtk11">nil</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13 bracket-highlighting-0">]</span></span></div></div>
</div>
<div>
<h1>XML:JDAML</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">xml</span><span class="mtk1"> </span><span class="mtk5">_jdaml</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk1"> </span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">first-name</span><span class="mtk1">=</span><span class="mtk6">"John"</span><span class="mtk1"> </span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">last-name</span><span class="mtk1">=</span><span class="mtk6">"Smith"</span><span class="mtk13">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">is-alive</span><span class="mtk1"> </span><span class="mtk5">_isattr</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk13">><</span><span class="mtk11">true/</span><span class="mtk13">></</span><span class="mtk11">is-alive</span><span class="mtk13">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">age</span><span class="mtk1"> </span><span class="mtk5">_isattr</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk13">><</span><span class="mtk11">u8</span><span class="mtk13">></span><span class="mtk1">27</span><span class="mtk13"></</span><span class="mtk11">u8</span><span class="mtk13">></</span><span class="mtk11">age</span><span class="mtk13">></span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">address</span><span class="mtk1"> </span><span class="mtk5">_isattr</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk1"> </span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">street-address</span><span class="mtk1">=</span><span class="mtk6">"21 2nd Street"</span><span class="mtk1"> </span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">city</span><span class="mtk1">=</span><span class="mtk6">"New York"</span><span class="mtk1"> </span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">state</span><span class="mtk1">=</span><span class="mtk6">"NY"</span><span class="mtk1"> </span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">postal-code</span><span class="mtk1">=</span><span class="mtk6">"10021-3100"</span><span class="mtk13">></span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk13"></</span><span class="mtk11">address</span><span class="mtk13">></span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">phone-numbers</span><span class="mtk1"> </span><span class="mtk5">_isattr</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk13">></span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">_node</span><span class="mtk1"> </span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">type</span><span class="mtk1">=</span><span class="mtk6">"home"</span><span class="mtk1"> </span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">number</span><span class="mtk1">=</span><span class="mtk6">"212 555-1234"</span><span class="mtk13">></span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">_node</span><span class="mtk13">></span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">_node</span><span class="mtk1"> </span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">type</span><span class="mtk1">=</span><span class="mtk6">"office"</span><span class="mtk1"> </span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">number</span><span class="mtk1">=</span><span class="mtk6">"646 555-4567"</span><span class="mtk13">></span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">_node</span><span class="mtk13">></span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk13"></</span><span class="mtk11">phone-numbers</span><span class="mtk13">></span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">children</span><span class="mtk1"> </span><span class="mtk5">_isattr</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk13">><</span><span class="mtk11">seq/</span><span class="mtk13">></</span><span class="mtk11">children</span><span class="mtk13">></span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">spouse</span><span class="mtk1"> </span><span class="mtk5">_isattr</span><span class="mtk1">=</span><span class="mtk6">"true"</span><span class="mtk13">><</span><span class="mtk11">nil/</span><span class="mtk13">></</span><span class="mtk11">spouse</span><span class="mtk13">></span></span></div><div style="top:437px;height:19px;" class="view-line"><span><span class="mtk13"></</span><span class="mtk11">xml</span><span class="mtk13">></span></span></div></div></div></div>
<style>
.comparison > div {
overflow-x: auto;
}
div.sourceCode {
margin: 0;
}
/* h1 {
text-align: center;
} */
.jevko .dt, .key .matter {
text-decoration: dotted underline #888 0.25px;
}
.comparison h1 {
font-size: 2rem;
font-family: monospace;
}
</style>
<h2 id="configuration">Configuration<a href="#fn2" class="footnote-ref"
id="fnref2" role="doc-noteref"><sup>2</sup></a></h2>
<style>
.jevko .bracket-0 {
color: #ffd704;
}
.jevko .bracket-1 {
color: #da70d6;
}
.jevko .bracket-2 {
color: #189dff;
}
</style>
<div style="text-align: center; font-family: monospace;">
<p><a href="https://jevko.github.io/jdaml/#config">[see the example
live]</a></p>
</div>
<div class="comparison black-bg">
<div>
<h1>JDAML:JSON</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk10">';[last modified 1 April 2001 by John Doe]</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">owner</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">name</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">John Doe</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">organization</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">Acme Widgets Inc.</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk13">.</span><span class="mtk5">database</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk10">';[use IP if name resolution is not working]</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">server</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">192.0.2.62</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">port</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13">'</span><span class="mtk11">u16</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk1">143</span><span class="mtk13 bracket-highlighting-2">]</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">file</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">payroll.dat</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13">.</span><span class="mtk5">select_columns</span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk1">name</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk1">address</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk1">phone number</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk6"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div></div>
</div>
<div>
<h1>JSON:JDAML</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"owner"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">{</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"name"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"John Doe"</span><span class="mtk13">,</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"organization"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"Acme Widgets Inc."</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">}</span><span class="mtk13">,</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"database"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">{</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"server"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"192.0.2.62"</span><span class="mtk13">,</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"port"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk8">143</span><span class="mtk13">,</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"file"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk6">"payroll.dat"</span><span class="mtk13">,</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">"select_columns"</span><span class="mtk13">:</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">[</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6">"name"</span><span class="mtk13">,</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6">"address"</span><span class="mtk13">,</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk6">"phone number"</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">}</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">}</span></span></div></div></div>
</div>
<h2 id="text-markup">Text markup<a href="#fn3" class="footnote-ref"
id="fnref3" role="doc-noteref"><sup>3</sup></a></h2>
<div style="text-align: center; font-family: monospace;">
<p><a href="https://jevko.github.io/jdaml/#html">[see the example
live]</a></p>
</div>
<div class="comparison black-bg">
<div>
<h1>JDAML:HTML</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7">
<div style="top:0px;height:19px;" class="view-line"></div>
<div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13">'</span><span class="mtk11">head</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">title</span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk1">This is a title</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk13">'</span><span class="mtk11">body</span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">div</span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">p</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk1">Hello world!</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">abbr</span><span class="mtk13 bracket-highlighting-2">[</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">id</span><span class="mtk13 bracket-highlighting-3">[</span><span class="mtk6">anId</span><span class="mtk13 bracket-highlighting-3">]</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">class</span><span class="mtk13 bracket-highlighting-3">[</span><span class="mtk6">jargon</span><span class="mtk13 bracket-highlighting-3">]</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">style</span><span class="mtk13 bracket-highlighting-3">[</span><span class="mtk6">color: purple;</span><span class="mtk13 bracket-highlighting-3">]</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">.</span><span class="mtk5">title</span><span class="mtk13 bracket-highlighting-3">[</span><span class="mtk6">Hypertext Markup Language</span><span class="mtk13 bracket-highlighting-3">]</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> HTML</span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">a</span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk13">.</span><span class="mtk5">href</span><span class="mtk13 bracket-highlighting-3">[</span><span class="mtk6 detected-link">https://www.wikipedia.org/</span><span class="mtk13 bracket-highlighting-3">]</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> A link to Wikipedia!</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">p</span><span class="mtk13 bracket-highlighting-2">[</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1"> Oh well, </span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'</span><span class="mtk11">span</span><span class="mtk13 bracket-highlighting-3">[</span><span class="mtk13">.</span><span class="mtk5">lang</span><span class="mtk13 bracket-highlighting-4">[</span><span class="mtk6">fr</span><span class="mtk13 bracket-highlighting-4">]</span><span class="mtk1">c'est la vie</span><span class="mtk13 bracket-highlighting-3">]</span><span class="mtk1">,</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> as they say in France.</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">]</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div>
<div style="top:399px;height:19px;" class="view-line"></div></div>
</div>
<div>
<h1>HTML:JDAML</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13"><</span><span class="mtk11">html</span><span class="mtk1"> </span><span class="mtk5">_jdaml</span><span class="mtk13">=</span><span class="mtk6">"true"</span><span class="mtk13">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">head</span><span class="mtk13">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">title</span><span class="mtk13">></span><span class="mtk1">This is a title</span><span class="mtk13"></</span><span class="mtk11">title</span><span class="mtk13">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">head</span><span class="mtk13">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">body</span><span class="mtk13">></span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">div</span><span class="mtk13">></span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">p</span><span class="mtk13">></span><span class="mtk1">Hello world!</span><span class="mtk13"></</span><span class="mtk11">p</span><span class="mtk13">></span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">abbr</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">id</span><span class="mtk13">=</span><span class="mtk6">"anId"</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">class</span><span class="mtk13">=</span><span class="mtk6">"jargon"</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">style</span><span class="mtk13">=</span><span class="mtk6">"color: purple;"</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk5">title</span><span class="mtk13">=</span><span class="mtk6">"Hypertext Markup Language"</span><span class="mtk13">></span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> HTML</span><span class="mtk13"></</span><span class="mtk11">abbr</span><span class="mtk13">></span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">a</span><span class="mtk1"> </span><span class="mtk5">href</span><span class="mtk13">=</span><span class="mtk6">"</span><span class="mtk6 detected-link">https://www.wikipedia.org/</span><span class="mtk6">"</span><span class="mtk13">></span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> A link to Wikipedia!</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">a</span><span class="mtk13">></span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">p</span><span class="mtk13">></span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> Oh well, </span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"><</span><span class="mtk11">span</span><span class="mtk1"> </span><span class="mtk5">lang</span><span class="mtk13">=</span><span class="mtk6">"fr"</span><span class="mtk13">></span><span class="mtk1">c'est la vie</span><span class="mtk13"></</span><span class="mtk11">span</span><span class="mtk13">></span><span class="mtk1">, </span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1"> as they say in France.</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">p</span><span class="mtk13">></span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">div</span><span class="mtk13">></span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">body</span><span class="mtk13">></span></span></div><div style="top:437px;height:19px;" class="view-line"><span><span class="mtk13"></</span><span class="mtk11">html</span><span class="mtk13">></span></span></div></div>
</div>
</div>
<h1 id="features-of-jdaml">Features of JDAML</h1>
<h2 id="same-basic-primitives-as-xmlhtml">Same basic primitives as
XML/HTML</h2>
<p>JDAML uses the same basic primitives as XML or HTML:</p>
<ol type="1">
<li>Text nodes.</li>
<li>Elements.</li>
<li>Attributes.</li>
</ol>
<h2 id="attributes-are-more-flexible">Attributes are more flexible</h2>
<p>Like in XML/HTML, attributes in JDAML are <em>semantically</em>
unique and unordered.</p>
<p>However, they are much more flexible than in XML/HTML:</p>
<ul>
<li>they are proper nodes, like elements,</li>
<li>can be placed anywhere within the parent,</li>
<li>can have children of their own.</li>
</ul>
<p>This gives JDAML the ability to represent unordered sets of
name-value pairs distinctly from ordered collections of values. So for
example we can have a clear mapping between JDAML and JSON objects and
arrays.</p>
<p>This design makes the format truly extensible. Changing a value of an
attribute from simple text to a complex structure is not only possible
(unlike in HTML/XML), but natural and easy.</p>
<p>Also, changing an attribute into an element and vice versa is
extremely easy (unlike in HTML/XML).</p>
<h2 id="whitespace-is-always-preserved">Whitespace is always
preserved</h2>
<p>JDAML always preserves whitespace in the syntax tree without any
change.</p>
<h1 id="status-of-jdaml">Status of JDAML</h1>
<p>Currently JDAML is experimental and only has a <a
href="https://jevko.github.io/jdaml">Proof of Concept implementation</a>
to test. Feedback welcome!</p>
<hr />
<h1 id="plain-jevko">Plain Jevko</h1>
<p>Here is how Jevko compares to the most popular syntaxes often used
for representing trees as text.</p>
<div style="visibility: hidden; position: absolute">
<p><a href="#fn4" class="footnote-ref" id="fnref4"
role="doc-noteref"><sup>4</sup></a></p>
</div>
<style>
.jsonfootnote {
outline: none;
}
</style>
<div class="comparison black-bg">
<div>
<h1>This Jevko...<br/> </h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">text data </span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk1">leaf text</span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">more text </span><span class="mtk13 bracket-highlighting-0">[</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> some nesting </span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk1">leafy greens</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> more nesting</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> to demonstrate </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> escaped delimiters: </span><span class="mtk4">`[</span><span class="mtk1"> </span><span class="mtk4">`]</span><span class="mtk1"> </span><span class="mtk4">``</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> some fenced text </span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13">```'</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> anything goes here ][</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> it's all plain text</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> until the closing fence</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">'```</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span></span></span></div><!--<div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> tagged text </span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk13">`/my_delimiter/</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> anything goes here as well ]`[</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1"> it's all plain text</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk1"> until the closing delimiter</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">/my_delimiter/</span><span class="mtk13 bracket-highlighting-1">]</span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span></span></span></div>--><div style="top:437px;height:19px;" class="view-line"><span><span class="mtk1"> some extra text</span></span></div><div style="top:456px;height:19px;" class="view-line"><span><span class="mtk1"> and on and on...</span></span></div><div style="top:475px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:494px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">]</span></span></div><div style="top:513px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:532px;height:19px;" class="view-line"><span><span class="mtk1">even more text at the end</span></span></div></div>
<div style="font-family: monospace;text-align: center;"><a href="#jevko-features">[#jevko]</a></div>
</div>
<div>
<h1>...is similar<br/>to this XML...</h1>
<div class="view-lines monaco-mouse-cursor-text main" role="presentation" aria-hidden="true" data-mprt="7" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;"><div style="top:0px;height:19px;" class="view-line"><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">></span><span><span class="mtk1">text data </span><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">></span><span class="mtk1">leaf text</span><span class="mtk13"></</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">more text </span><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1"> some nesting </span><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">></span><span class="mtk1">leafy greens</span><span class="mtk13"></</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1"> more nesting</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1"> to demonstrate </span><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1"> escaped delimiters: [ ] `</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13"></</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1"> some fenced text </span><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">><![CDATA[</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1"> anything goes here ][</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1"> it's all plain text</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1"> until the closing fence</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">]]></</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span></span></span></div><!--<div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1"> tagged text </span><span class="mtk13"><</span><span class="mtk11">_</span><span class="mtk13">><![CDATA[</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1"> anything goes here as well ]`[</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1"> it's all plain text</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk1"> until the closing delimiter</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk13">]]></</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span></span></span></div>--><div style="top:437px;height:19px;" class="view-line"><span><span class="mtk1"> some extra text</span></span></div><div style="top:456px;height:19px;" class="view-line"><span><span class="mtk1"> and on and on...</span></span></div><div style="top:475px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:494px;height:19px;" class="view-line"><span><span class="mtk13"></</span><span class="mtk11">_</span><span class="mtk13">></span></span></div><div style="top:513px;height:19px;" class="view-line"></div><div style="top:532px;height:19px;" class="view-line"><span><span class="mtk1">even more text at the end</span></span><span class="mtk13"></</span><span class="mtk11">_</span><span class="mtk13">></span></div></div>
<div style="font-family: monospace;text-align: center;"><a href="#xml-analogy">[#like-xml]</a></div>
</div>
<div>
<h1>...or to this<br/>S-expression...</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1 bracket-highlighting-0">(</span><span class="mtk6">"text data "</span><span class="mtk1 bracket-highlighting-1">(</span><span class="mtk6">"leaf text"</span><span class="mtk1 bracket-highlighting-1">)</span><span class="mtk6">"</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk6">more text "</span><span class="mtk1 bracket-highlighting-1">(</span><span class="mtk6">"</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk6"> some nesting "</span><span class="mtk1 bracket-highlighting-2">(</span><span class="mtk6">"leafy greens"</span><span class="mtk1 bracket-highlighting-2">)</span><span class="mtk6">"</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk6"> more nesting</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk6"> to demonstrate "</span><span class="mtk1 bracket-highlighting-2">(</span><span class="mtk6">"</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk6"> escaped delimiters: [ ] `</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk6"> "</span><span class="mtk1 bracket-highlighting-2">)</span><span class="mtk6">"</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk6"> some fenced text "</span><span class="mtk1 bracket-highlighting-2">(</span><span class="mtk6">"</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk6"> anything goes here ][</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk6"> it's all plain text</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk6"> until the closing fence</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk6"> "</span><span class="mtk1 bracket-highlighting-2">)</span><span class="mtk6">"</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk6"> some extra text</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk6"> and on and on...</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk6">"</span><span class="mtk1 bracket-highlighting-1">)</span><span class="mtk6">"</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span class="mtk6">even more text at the end"</span><span class="mtk1 bracket-highlighting-0">)</span></span></div></div>
<div style="font-family: monospace;text-align: center;"><a href="#like-s-expr">[#like-s-expr]</a></div>
</div>
<div>
<h1>...or<br/>to this JSON<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>.</h1>
<div class="view-lines monaco-mouse-cursor-text main" style="font-family: "Droid Sans Mono", "monospace", monospace; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; font-variation-settings: normal; line-height: 19px; letter-spacing: 0px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk13 bracket-highlighting-0">[</span><span class="mtk6"> "text data "</span><span class="mtk13">,</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">[</span><span class="mtk6">"leaf text"</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13">,</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>more text "</span><span class="mtk13">,</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-1">[</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> some nesting "</span><span class="mtk13">,</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">[</span><span class="mtk6">"leafy greens"</span><span class="mtk13 bracket-highlighting-2">]</span><span class="mtk13">,</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> more nesting"</span><span class="mtk13">,</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> to demonstrate "</span><span class="mtk13">,</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">[</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> escaped delimiters: [ ] `"</span><span class="mtk13">,</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> "</span><span class="mtk13 bracket-highlighting-2">]</span><span class="mtk13">,</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> some fenced text "</span><span class="mtk13">,</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">[</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> anything goes here ]["</span><span class="mtk13">,</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> it's all plain text"</span><span class="mtk13">,</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> until the closing fence"</span><span class="mtk13">,</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> "</span><span class="mtk13 bracket-highlighting-2">]</span><span class="mtk13">,</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><!--<div style="top:323px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> tagged text "</span><span class="mtk13">,</span><span class="mtk1"> </span><span class="mtk13 bracket-highlighting-2">[</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> anything goes here as well ]`["</span><span class="mtk13">,</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> it's all plain text"</span><span class="mtk13">,</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> until the closing delimiter"</span><span class="mtk13">,</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> "</span><span class="mtk13 bracket-highlighting-2">]</span><span class="mtk13">,</span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div>--><div style="top:437px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> some extra text"</span><span class="mtk13">,</span></span></div><div style="top:456px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span> and on and on..."</span><span class="mtk13">,</span></span></div><div style="top:475px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><div style="top:494px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13 bracket-highlighting-1">]</span><span class="mtk13">,</span></span></div><div style="top:513px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>"</span><span class="mtk13">,</span></span></div><div style="top:532px;height:19px;" class="view-line"><span><span class="mtk6">"<span class="mtk4">\n</span>even more text at the end" </span><span class="mtk13 bracket-highlighting-0">]</span></span></div></div>
<div style="font-family: monospace;text-align: center;"><a href="#json-analogy">[#like-json]</a></div>
</div>
</div>
<p><a name="jevko-features"></a></p>
<h1 id="features-of-jevko">Features of Jevko</h1>
<h2 id="just-text-and-square-brackets">Just <code>text</code> and
<code>[</code>square brackets<code>]</code></h2>
<p>Plain Jevko is just Unicode text in which nested square brackets
create a hierarchical tree structure. In addition, there is syntax to
escape the brackets, so they can also be part of text, and some syntax
sugar useful when we don’t want to worry about escaping. That’s
basically it.</p>
<p>Jevko simply captures the concept of a generic tree of text in the
most minimal reasonable way. The only significant characters in Jevko
are two square brackets and one escape character.</p>
<h2 id="square-brackets-in-text">Square brackets in text</h2>
<p>To treat square brackets as text, they can be escaped.</p>
<p>Alternatively text can be fenced, like in Markdown, in which case no
escaping is needed at all.</p>
<h2 id="whitespace-agnostic">Whitespace-agnostic</h2>
<p>Jevko is completely whitespace-agnostic: it treats whitespace as any
other character. It doesn’t ignore it or use it as a separator or
anything like that. All whitespace is preserved in the tree
verbatim.</p>
<h2 id="good-for-all-kinds-of-formats">Good for all kinds of
formats</h2>
<p>Due to its simplicity and generic nature, Jevko is the perfect
building block for formats that work well not only for representing
data, but also for text markup. We can even do both in one format, as <a
href="#jevko-data-and-markup-language">Jevko Data And Markup
Language</a> demonstrates.</p>
<h1 id="jevko-is-like">Jevko is like…</h1>
<p><a name="xml-analogy"></a></p>
<h2 id="simplified-xmlhtml">…simplified XML/HTML</h2>
<p>Jevko can be thought of as a very stripped down XML where we only
have:</p>
<ol type="1">
<li>Text nodes.</li>
<li>Anonymous, tagless elements without attributes.</li>
<li>A more flexible and convenient CDATA in the form of fenced
text.</li>
</ol>
<p>All in an extremely lean syntax.</p>
<p>In Jevko the root element is implicit.</p>
<p><a name="like-s-expr"></a></p>
<h2 id="simplified-s-expressions">…simplified S-expressions</h2>
<p>Jevko can be thought of as a minimal version of S-expressions where
we only have:</p>
<ol type="1">
<li>Strings.</li>
<li>Lists.</li>
</ol>
<p>However:</p>
<ol type="1">
<li><p>Jevko strings (text nodes) can span multiple lines and are not
quoted (but can be fenced like in Markdown to include square brackets
without having to escape them).</p></li>
<li><p>Instead of round brackets Jevko uses square brackets to delimit
the lists (subjevkos).</p></li>
</ol>
<p><a name="json-analogy"></a></p>
<h2 id="simplified-json">…simplified JSON</h2>
<p>Jevko can be thought of as simplified JSON where we only have:</p>
<ol type="1">
<li>Strings.</li>
<li>Arrays.</li>
</ol>
<p>However Jevko strings (text nodes) can span multiple lines and are
not quoted (but can be fenced like in Markdown to include square
brackets without having to escape them).</p>
<h1 id="status-of-jevko">Status of Jevko</h1>
<p>Jevko is thoroughly battle-tested, has a stable formal specification
(it can be implemented in any programming language), and a reference
implementation in JavaScript (it can be used in any JavaScript
runtime).</p>
<h1 id="implementing-jevko">Implementing Jevko</h1>
<p><a name="spec"></a></p>
<h2 id="formal-specification">Formal specification</h2>
<p><a href="spec.html">The Jevko Syntax: Standard Grammar
Specification</a> is a stable formal specification of the basic syntax.
No breaking changes shall be introduced to this specification.</p>
<h2 id="interactive-railroad-diagrams">Interactive railroad
diagrams</h2>
<p>The <a href="diagram.xhtml">Jevko interactive railroad diagrams</a>
complement the specification, together providing a convenient reference
for implementing parsers and other Jevko processors.</p>
<h2 id="extensions-specification">Extensions specification</h2>
<p><a href="extensions.html">The Jevko Syntax: Extensions
Specification</a> is a formal specification of two backwards-compatible
extensions to Jevko. These extensions introduce fenced text a’la
Markdown and tagged text a’la heredocs.</p>
<h2 id="reference-implementation">Reference implementation</h2>
<p><a href="https://github.com/jevko/jevko.js">jevko.js</a> is the
official reference implementation of Jevko in JavaScript.</p>
<h1 id="more-jevko-resources">More Jevko resources</h1>
<h2 id="community-implementations-and-examples">Community
implementations and examples</h2>
<p><a href="https://github.com/jevko/community">jevko/community on
GitHub</a> lists several implementations of Jevko in various programming
languages by different authors. It also contains examples of what some
users did with Jevko. <a
href="https://github.com/jevko/examples">jevko/examples</a> contains a
few more simple examples.</p>
<h2 id="jevko-for-prototyping-programming-lanugages">Jevko for
prototyping programming lanugages</h2>
<p>Designing a programming language with Jevko by <a
href="https://xtao.org/wizardlang.html">manually translating 600+ pages
of code snippets from the book “Structure and Interpretation of Computer
Programs”</a>.</p>
<h2 id="writing-about-jevko">Writing about Jevko</h2>
<p><a href="https://github.com/jevko/writing">jevko/writing on
GitHub</a> has some <a
href="https://github.com/jevko/writing#about-jevko">articles about
Jevko</a> and other topics.</p>
<h2 id="old-software">Old software</h2>
<p>There are:</p>
<ul>
<li><p><a
href="https://github.com/jevko/jevko/blob/master/parsers.md">Jevko
parsers in various languages</a>.</p></li>
<li><p><a
href="https://github.com/jevko/jevko/blob/master/formats.md">Experimental
Jevko-based formats</a>.</p></li>
<li><p><a
href="https://github.com/jevko/jevko/blob/master/variants-and-extensions.md">Jevko
variants, extensions, and experiments</a>.</p></li>
</ul>
<h2 id="syntax-highlighting">Syntax highlighting</h2>
<ul>
<li><p><a
href="https://github.com/jevko/jevko-basic-highlighting-vscode">Basic
highlighting for Visual Studio Code</a></p></li>
<li><p><a href="https://github.com/jevko/codemirror6language">Basic
highlighting for CodeMirror6</a></p></li>
<li><p><a href="https://github.com/jevko/jevko-basic-highlighting">Basic
highlighting for KDE KatePart Syntax Highlight System,
CodeMirror6</a></p></li>
</ul>
<h2 id="integration-with-tools-editors-ides">Integration with tools,
editors, IDEs</h2>
<ul>
<li><a href="https://github.com/jevko/jevko-vscode">Jevko Interface for
Visual Studio Code</a></li>
</ul>
<h2 id="command-line-interface">Command Line Interface</h2>
<ul>
<li><a href="https://github.com/jevko/jevko-cli">Jevko CLI</a></li>
</ul>
<section id="more" style="display:none">
<h1>More</h1>
<h2 id="jevko-for-hackers">Jevko for hackers</h2>
<p>For do-it-yourself-oriented tinkerers, hackers, or minimalists plain
Jevko is ready to be used to define custom formats for all kinds of
applications that deal with tree-structured information.</p>
<h2 id="experimental-software">Experimental software</h2>
<h3 id="use-jevko-today">Use Jevko today</h3>
<p>For solution-oriented users, Jevko formats like those shown above are
in development and available to experiment with via the Jevko CLI or the
<a
href="https://marketplace.visualstudio.com/items?itemName=jevko.jevko">Jevko
Interface for Visual Studio Code</a>.</p>
<h3 id="jevko-cli-and-jevko-for-vs-code">Jevko CLI and Jevko for VS
Code</h3>
<p>You can try out the formats you see above today with the experimental
<a href="https://github.com/jevko/jevko-cli">Jevko Command Line
Interface</a> or the <a
href="https://marketplace.visualstudio.com/items?itemName=jevko.jevko">Jevko
Interface for Visual Studio Code</a>. These can convert Jevko into JSON,
HTML, or various XML-based formats. This allows for easy integration
with existing applications.</p>
<p>Jevko formats give you the full power of the target format via JSON
or XML literals and data-model compatibility. On top of that you get
features such as here documents (via the <a
href="https://github.com/jevko/specifications/blob/master/draft-extension-heredocs.md">backwards-compatible
Jevko syntax extension</a>), extremely lean comments, ability to disable
(“comment out”) an entire Jevko subtree by prefixing it with “-”,
autotrimmed unquoted strings, or quoted multiline strings.</p>
<p>All this in a very simple human-friendly syntax.</p>
<h3 id="syntax-highlighting-1">Syntax highlighting</h3>
<p>Experimental Jevko syntax highlighting extensions for Visual Studio
Code are available for the following formats/file types:</p>
<ul>
<li>Data interchange: <a
href="https://github.com/jevko/jevkodata-basic-highlighting-vscode">.jevkodata</a></li>
<li>Configuration: <a
href="https://github.com/jevko/jevkodata-basic-highlighting-vscode">.jevkocfg</a>
(same extension as .jevkodata for now)</li>
<li>Markup: <a
href="https://github.com/jevko/jevkoml-basic-highlighting-vscode">.jevkoml</a></li>
<li>Generic: <a
href="https://github.com/jevko/jevko-basic-highlighting-vscode">.jevko</a></li>
</ul>
<p>There are also experimental Jevko syntax highlighting definitions for
other environments:</p>
<ul>
<li>Generic: <a
href="https://github.com/jevko/jevko-basic-highlighting">.jevko</a> –
KDE KatePart Syntax Highlight System, CodeMirror6</li>
</ul>
</section>
<p><a name="resources"></a></p>
<h1 id="news-social-media-other">News, social media, other</h1>
<p>You can follow Jevko on <a
href="https://layer8.space/@jevko">Mastodon</a> or subscribe to the <a
href="https://layer8.space/@jevko.rss">RSS channel</a> for latest
news.</p>
<p>You can also follow the official Jevko organizations on <a
href="https://github.com/jevko">GitHub</a> and <a
href="https://codeberg.org/jevko-org">Codeberg</a> to track the latest
developments.</p>
<p>There is also an official <a
href="https://www.reddit.com/r/jevko/">/r/jevko subreddit</a>.</p>
<p>Jevko-related resources can also be found at the official <a
href="https://archive.org/details/@jevko">Jevko profile on
archive.org</a> and the official <a
href="https://www.youtube.com/@jevko-org">Jevko YouTube channel</a>.</p>
<h1 id="etymology-and-pronunciation">Etymology and pronunciation</h1>
<p>The name <a
href="http://ipa-reader.xyz/?text=%CB%88d%CD%A1%CA%92ef.k%C9%99%CA%8A&voice=Joey"><em>Jevko</em>
/ˈd͡ʒef.kəʊ/</a> is derived from Polish <a
href="https://en.wiktionary.org/wiki/drzewko"><em>drzewko</em>
/ˈdʐɛf.kɔ/</a>, meaning small tree.</p>
<h1 id="license">License</h1>
<p>Jevko is intended as a universal syntax, to be used without
restriction in any software, for any purpose. It is open and free, along
with any syntaxes, formats, and standards based upon it.</p>
<p>For legal purposes, if not specified otherwise, Jevko and related
projects are under the <a
href="https://choosealicense.com/licenses/mit/">MIT License</a>.</p>
<div style="font-size: 10pt">
<pre><code>Copyright (c) 2021-2024 Jevko.org
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.</code></pre>
</div>
<p>Thank you for visiting.</p>
<hr />
<p>Jevko is a part of <a
href="https://xtao.org"><img style="width:2rem;position: relative;top: 0.5rem;" src="/tao-logo.svg" />
<strong>TAO</strong></a>, a project to cultivate simplicity in
software.</p>
<hr />
<div style="font-size: 30pt; text-align: center;"
title="Click here to Google Translate jevko.org. The default target language is Chinese. You can change it in the menu that will appear at the top.">
<p><a
href="https://jevko-org.translate.goog/?_x_tr_sl=en&_x_tr_tl=zh-TW&_x_tr_hl=en">Google
Translate jevko.org</a></p>
</div>
<aside id="footnotes" class="footnotes footnotes-end-of-document"
role="doc-endnotes">
<hr />
<ol>
<li id="fn1"><p>The data interchange examples shown here are based on an
<a href="https://en.wikipedia.org/wiki/JSON#Syntax">example piece of
JSON from Wikipedia</a>.<a href="#fnref1" class="footnote-back"
role="doc-backlink">↩︎</a></p></li>
<li id="fn2"><p>The configuration examples shown here are based on an <a
href="https://en.m.wikipedia.org/wiki/INI_file#Example">example piece of
INI from Wikipedia</a>.<a href="#fnref2" class="footnote-back"
role="doc-backlink">↩︎</a></p></li>
<li id="fn3"><p>The text markup examples shown here are based on an <a
href="https://en.wikipedia.org/wiki/HTML#Attributes">example pieces of
HTML from Wikipedia</a>.<a href="#fnref3" class="footnote-back"
role="doc-backlink">↩︎</a></p></li>
<li id="fn4"><p>To keep the comparison clear we split single text nodes
into multiple here.</p>
<p>Actual JSON would look more like this:</p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode json jsonfootnote"><code class="sourceCode json"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ot">[</span><span class="st">"text data "</span><span class="ot">,[</span><span class="st">"leaf text"</span><span class="ot">],</span><span class="st">"</span><span class="ch">\n\n</span><span class="st">more text "</span><span class="ot">,[</span><span class="st">"</span><span class="ch">\n\n</span><span class="st"> some nesting "</span><span class="ot">,[</span><span class="st">"leafy greens"</span><span class="ot">],</span><span class="st">"</span><span class="ch">\n\n</span><span class="st"> more nesting</span><span class="ch">\n</span><span class="st"> to demonstrate "</span><span class="ot">,[</span><span class="st">"</span><span class="ch">\n</span><span class="st"> escaped delimiters: [ ] `</span><span class="ch">\n</span><span class="st"> "</span><span class="ot">],</span><span class="st">"</span><span class="ch">\n\n</span><span class="st"> some fenced text "</span><span class="ot">,[</span><span class="st">"</span><span class="ch">\n</span><span class="st"> anything goes here ][</span><span class="ch">\n</span><span class="st"> it's all plain text</span><span class="ch">\n</span><span class="st"> until the closing fence</span><span class="ch">\n</span><span class="st"> "</span><span class="ot">],</span><span class="st">"</span><span class="ch">\n\n</span><span class="st"> some extra text</span><span class="ch">\n</span><span class="st"> and on and on...</span><span class="ch">\n\n</span><span class="st">"</span><span class="ot">],</span><span class="st">"</span><span class="ch">\n\n</span><span class="st">even more text at the end"</span><span class="ot">]</span></span></code></pre></div>
<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></li>
</ol>
</aside>
<footer id="bottom" class="black-bg">
<div class="footer">
<!-- <a href="/index.html" class="footer-link"> -->
<div class="left" style="margin-bottom: 1.25rem;">© 2024 Jevko.org</div>
<!-- </a> -->
<div class="right links">
<a href="/attribution.html" title="Click here to go to the [attribution] subpage"><!--
-->[attribution]<!--
--></a>
</div>
</div>
</footer>
</body>
</html>