@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
64 lines (61 loc) • 3.23 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
<title>pb-code-highlight Demo</title>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
</head>
<body>
<pb-demo-snippet>
<template>
<style>
pb-code-highlight {
margin-bottom: 1em;
--pb-code-highlight-white-space: pre-wrap;
--pb-code-highlight-theme: "solarizedlight";
}
</style>
<pb-page theme="components.css">
<pb-code-highlight class="code-white-bg" language="xquery" line-numbers>
for $i in $root//tei:placeName
order by $i descending
return
<li>{$i/string()}<li>
</pb-code-highlight>
<pb-code-highlight language="html" theme="okaidia" line-numbers>
<template>
<pb-view src="document1" odd="graves" subscribe="letter" emit="letter"
wait-for="pb-leaflet-map">
<pb-param name="mode" value="facets" />
</pb-view>
</template>
</pb-code-highlight>
<pb-code-highlight language="javascript" theme="funky" line-numbers
code="function(name) { return 'Hello ' + name; };"></pb-code-highlight>
<pb-code-highlight language="css" theme="coy" line-numbers>
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald",Verdana,"Helvetica", sans-serif;
font-weight: 400 !important;
line-height: 1.2;
}
</pb-code-highlight>
<pb-code-highlight language="xml" theme="tomorrow" line-numbers>
<template>
<elementSpec ident="section">
<modelSequence predicate="$parameters?mode='breadcrumbs'">
<model behaviour="inline">
<param name="content" value="$get(.)/ancestor::section/title"/>
</model>
<model behaviour="inline">
<param name="content" value="title"/>
</model>
</modelSequence>
<model behaviour="block"/>
</elementSpec>
</template>
</pb-code-highlight>
</pb-page>
</template>
</pb-demo-snippet>
</body>
</html>