Slide Preview is Blank

[Liong1976]

Describe the bug
After the last update (1.18.1), the Slide Preview is blank
I am using Windows 10, Obsidian 1.0.0, both version, and the installer.

Samples to Reproduce

Expected behavior
The Slide Preview shows the slide

[mkusz]

Seems like a duplicate of #145 or we have simillar problem casued by something else. Try to change file name to one without spaces and see if it helps.

[Liong1976]

I had tried with a file without spaces and still didn't work.

[MSzturc]

Please have a look in the Developer Console, is there an exception?

[Liong1976]

Here is the screenshot:

Thanks

[MSzturc]

That's weird, please reproduce the error, click on the last link (Slide.md:220:25) and upload a screenshot of the code there

[Liong1976]

Here is the screenshot:

Here are the whole codes if you need them:

`

<title></title>
<link rel="stylesheet" href="/dist/reveal.css" />
<link rel="stylesheet" href="/dist/theme/league.css" id="theme" />
<link rel="stylesheet" href="/plugin/highlight/zenburn.css" />
<link rel="stylesheet" href="/css/layout.css" />
<link rel="stylesheet" href="/plugin/customcontrols/style.css">
<link rel="stylesheet" href="/plugin/chalkboard/style.css">

<link rel="stylesheet" href="/plugin/reveal-pointer/pointer.css" />


<script defer src="/dist/fontawesome/all.min.js"></script>

<script type="text/javascript">
	var forgetPop = true;
	function onPopState(event) {
		if(forgetPop){
			forgetPop = false;
		} else {
			parent.postMessage(event.target.location.href, "app://obsidian.md");
		}
    }
	window.onpopstate = onPopState;
	window.onmessage = event => {
		if(event.data == "reload"){
			window.document.location.reload();
		}
		forgetPop = true;
	}

	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();
		if (document.readyState === 'complete') {
			if (window.location.href.indexOf("?export") != -1){
				parent.postMessage(event.target.location.href, "app://obsidian.md");
			}
			if (window.location.href.indexOf("print-pdf") != -1){
				let stateCheck = setInterval(() => {
					clearInterval(stateCheck);
					window.print();
				}, 250);
			}
		}
};


    </script>

<script type="text/template">

Title

• Advanced Slide Plugin

</script>

<script src="/dist/reveal.js"></script>

<script src="/plugin/markdown/markdown.js"></script>
<script src="/plugin/highlight/highlight.js"></script>
<script src="/plugin/zoom/zoom.js"></script>
<script src="/plugin/notes/notes.js"></script>
<script src="/plugin/math/math.js"></script>
<script src="/plugin/mermaid/mermaid.js"></script>
<script src="/plugin/chart/chart.min.js"></script>
<script src="/plugin/chart/plugin.js"></script>
<script src="/plugin/menu/menu.js"></script>
<script src="/plugin/customcontrols/plugin.js"></script>
<script src="/plugin/chalkboard/plugin.js"></script>
<script src="/plugin/reveal-pointer/pointer.js"></script>
<script src="/plugin/elapsed-time-bar/elapsed-time-bar.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();
var isLight = isLight(bgColor);

if(isLight){
	document.body.classList.add('has-light-background');
} else {
	document.body.classList.add('has-dark-background');
}

  // default options to init reveal.js
  var defaultOptions = {
    controls: true,
    progress: true,
    history: true,
    center: true,
    transition: 'default', // none/fade/slide/convex/concave/zoom
    plugins: [
      RevealMarkdown,
      RevealHighlight,
      RevealZoom,
      RevealNotes,
      RevealMath.MathJax3,
	  RevealMermaid,
	  RevealChart,
	  RevealCustomControls,
	  RevealMenu,
      RevealPointer
	  RevealChalkboard, 
	  ElapsedTimeBar
    ],


	allottedTime: 120 * 1000,

	mathjax3: {
		mathjax: '/plugin/math/mathjax/tex-mml-chtml.js',
	},
	markdown: {
	  gfm: true,
	  mangle: true,
	  pedantic: false,
	  smartLists: false,
	  smartypants: false,
	},

	mermaid: {
		theme: isLight ? 'default' : 'dark',
	},

	customcontrols: {
		controls: [
			{id: 'toggle-overview',
			title: 'Toggle overview (O)',
			icon: '<i class="fa fa-th"></i>',
			action: 'Reveal.toggleOverview();'
			},
			{ icon: '<i class="fa fa-pen-square"></i>',
			title: 'Toggle chalkboard (B)',
			action: 'RevealChalkboard.toggleChalkboard();'
			},
			{ icon: '<i class="fa fa-pen"></i>',
			title: 'Toggle notes canvas (C)',
			action: 'RevealChalkboard.toggleNotesCanvas();'
			},
		]
	},
	menu: {
		loadIcons: false
	}
  };

  // options from URL query string
  var queryOptions = Reveal().getQueryHash() || {};

  var options = extend(defaultOptions, {"width":960,"height":700,"margin":0.04,"controls":true,"progress":true,"slideNumber":true,"transition":"fade","transitionSpeed":"normal"}, queryOptions);
</script>

<script>
  Reveal.initialize(options);
</script>

`

[NomadicSquirrel]

I'm getting a similar issue when the Chalkboard plugin is enabled.
#146 Solved my issue

[shedali]

while waiting for release, you could manually update .obsidian/plugins/obsidian-advanced-slides/template/reveal.html
and add the missing comma to line 189 (at your own risk :))

[Liong1976]

Thanks, @shedali

[MSzturc]

will be fixed with 1.19

[Liong1976]

Thanks, @MSzturc! I appreciate it