obsidian-vault/.obsidian/plugins/obsidian-advanced-slides/template/embed.html

153 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>{{{title}}}</title>
<link rel="stylesheet" href="{{{base}}}dist/reveal.css" />
<link rel="stylesheet" href="{{{base}}}{{{themeUrl}}}" id="theme" />
<link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />
<link rel="stylesheet" href="{{{base}}}css/layout.css" />
{{#cssPaths}}
<link rel="stylesheet" href="{{{base}}}{{{.}}}" />
{{/cssPaths}}
<script defer src="{{{base}}}dist/fontawesome/all.min.js"></script>
<script type="text/javascript">
function fitElements(){
const itemsToFit = document.getElementsByClassName('fitText');
for (const item in itemsToFit) {
if (Object.hasOwnProperty.call(itemsToFit, item)) {
var element = itemsToFit[item];
fitElement(element,1, 1000);
element.classList.remove('fitText');
}
}
}
function fitElement(element, start, end){
let size = (end + start) / 2;
element.style.fontSize = `${size}px`;
if(Math.abs(start - end) < 1){
while(element.scrollHeight > element.offsetHeight){
size--;
element.style.fontSize = `${size}px`;
}
return;
}
if(element.scrollHeight > element.offsetHeight){
fitElement(element, start, size);
} else {
fitElement(element, size, end);
}
}
document.onreadystatechange = () => {
fitElements();
};
</script>
</head>
<body>
<div class="reveal">
<div class="slides">{{{slides}}}</div>
</div>
<script src="{{{base}}}dist/reveal.js"></script>
<script src="{{{base}}}plugin/markdown/markdown.js"></script>
<script src="{{{base}}}plugin/highlight/highlight.js"></script>
<script src="{{{base}}}plugin/zoom/zoom.js"></script>
<script src="{{{base}}}plugin/notes/notes.js"></script>
<script src="{{{base}}}plugin/math/math.js"></script>
<script src="{{{base}}}plugin/mermaid/mermaid.js"></script>
<script src="{{{base}}}plugin/chart/chart.min.js"></script>
<script src="{{{base}}}plugin/chart/plugin.js"></script>
<script>
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
function isLight(color) {
let hex = color.replace('#', '');
// convert #fff => #ffffff
if(hex.length == 3){
hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
}
const c_r = parseInt(hex.substr(0, 2), 16);
const c_g = parseInt(hex.substr(2, 2), 16);
const c_b = parseInt(hex.substr(4, 2), 16);
const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
return brightness > 155;
}
var bgColor = getComputedStyle(document.documentElement).getPropertyValue('--r-background-color').trim();
if(isLight(bgColor)){
document.body.classList.add('has-light-background');
} else {
document.body.classList.add('has-dark-background');
}
// default options to init reveal.js
var defaultOptions = {
controls: false,
progress: false,
history: false,
center: true,
transition: 'default', // none/fade/slide/convex/concave/zoom
plugins: [
RevealMarkdown,
RevealHighlight,
RevealZoom,
RevealNotes,
RevealMath.MathJax3,
RevealMermaid,
RevealChart,
],
mathjax3: {
mathjax: '{{{base}}}plugin/math/mathjax/tex-mml-chtml.js',
},
};
// options from URL query string
var queryOptions = Reveal().getQueryHash() || {};
var options = extend(defaultOptions, {{{revealOptionsStr}}}, queryOptions);
options.controls = false;
options.progress = false;
options.history = false;
options.overview = false;
options.slideNumber = false;
options.keyboard = false;
</script>
<script>
Reveal.initialize(options);
</script>
</body>
</html>