code-blast-codemirror/demo/index.html at b0b70b60221a9237f459ed97110fa30ec134be2d · chinchang/code-blast-codemirror · GitHub

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
<html>
	<head>
		<meta charset="utf-8">
		<title>Code blast plugin for Codemirror</title>
		<link rel="stylesheet" href="codemirror/lib/codemirror.css">
		<link rel="stylesheet" href="codemirror/theme/monokai.css">

		<style>
		body {
			margin: 0;
			padding: 0;
			background: #222;
		}

		/* Codemirror */
		.Codemirror {
			width: 100%;
			height: 100%;
			font-size: 20px;
		}

		</style>
	</head>

	<body>

	    <script src="codemirror/lib/codemirror.js"></script>
	    <script src="codemirror/addon/edit/closetag.js"></script>
	    <script src="codemirror/mode/xml/xml.js"></script>
	    <script src="codemirror/mode/javascript/javascript.js"></script>
	    <script src="codemirror/mode/css/css.js"></script>
	    <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
	    <script src="../code-blast.js"></script>

	    <script>
		window.cm = CodeMirror(document.body, {
			lineNumbers: true,
			mode:  "htmlmixed",
			theme: 'monokai',
			lineWrapping: true,
			autofocus: true,
			tabSize: 2,
			value: "<article>\n  <h1>Code blast plugin for Codmirror</h1>\n  <div class=\"based-on\">\n    Based on Joel Besada's experiment:\n    https://twitter.com/JoelBesada/status/670343885655293952\n  </div>\n  \n  <div>\n\t  Github: https://github.com/chinchang/code-blast-codemirror/\n  </div>\n  \n</article>",
			autoCloseTags: true,
			blastCode: {
				effect: 2,
				shakeIntensity: 2,
				maxParticleSize: 4
			},
		});
	    </script>

	</body>
</html>