Testing ckeditor5 with mathpreview plugin

Mathpreview plugin for ckeditor5 allows you to preview how a latex math formula will look like, when rendered. It supports MathJax and Katex engines.

by centaur54dev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Testing ckeditor5 with mathpreview plugin</title>
	<style>
		body {
			max-width: 90%;
			margin: 20px auto;
		}
	</style>
</head>


<body>
	<h1>Testing ckeditor5 with mathpreview plugin</h1>
	<pre  style="white-space:normal; "><a href="https://github.com/centaur54dev/ckeditor5-math-preview">Mathpreview plugin</a> for ckeditor5 allows you to preview how a latex math formula will look like, when rendered. It supports MathJax and Katex engines. The plugin works like this:
		<ul> 
			<li> The toolbar button f(x) operates as a ON/OFF switch. For the plugin to work the button must be enabled.</li>
			<li> Enter a formula in latex, enclosed in \[ \] or \( \). For example \[x^2+5x-12=0\]</li>
			<li> Click on the typed formula. A popup should display it rendered. </li>
		</ul>
	</pre>


	<div id="editor1"></div>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML' async></script>
	<script src="https://cdn.jsdelivr.net/gh/centaur54dev/ckeditor5-build-classic@stable/build/ckeditor.js"></script>
	<script>
		let editorDiv = document.getElementById("editor1");
		let editor = ClassicEditor
	        .create(  editorDiv )
	        .then( (editor) => {
	            console.log( "editor1 loaded succesfully");
	        } )
	        .catch( error => {	
	            console.error( error );
	        } );
	</script>
</body>
</html>