Update to use syntax highlighting in block explorer

This commit is contained in:
Tim Mickel 2016-06-01 10:47:47 -04:00
parent 4df584bc20
commit 6593c399c1
4 changed files with 8 additions and 2 deletions

View file

@ -19,6 +19,7 @@
}, },
"devDependencies": { "devDependencies": {
"eslint": "2.7.0", "eslint": "2.7.0",
"highlightjs": "^8.7.0",
"json-loader": "0.5.4", "json-loader": "0.5.4",
"scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git", "scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git",
"tap": "5.7.1", "tap": "5.7.1",

View file

@ -5,12 +5,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Scratch VM Playground</title> <title>Scratch VM Playground</title>
<link rel="stylesheet" href="playground.css"> <link rel="stylesheet" href="playground.css">
<link rel="stylesheet" href="../node_modules/highlightjs/styles/zenburn.css">
</head> </head>
<body> <body>
<div id="vm-devtools"> <div id="vm-devtools">
<div id="tab-blockexplorer"> <div id="tab-blockexplorer">
<h2>VM Block Representation</h2> <h2>VM Block Representation</h2>
<textarea id="blockexplorer" spellcheck="false"></textarea> <pre id="blockexplorer"></pre>
</div> </div>
</div> </div>
<div id="blocks"></div> <div id="blocks"></div>
@ -75,6 +76,8 @@
</category> </category>
</xml> </xml>
<!-- Syntax highlighter -->
<script src="../node_modules/highlightjs/highlight.pack.min.js"></script>
<!-- Scratch Blocks --> <!-- Scratch Blocks -->
<!-- For easier development between the two, use `npm link` --> <!-- For easier development between the two, use `npm link` -->
<script src="../node_modules/scratch-blocks/blockly_compressed_vertical.js"></script> <script src="../node_modules/scratch-blocks/blockly_compressed_vertical.js"></script>

View file

@ -20,7 +20,8 @@ body {
#blockexplorer { #blockexplorer {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 90%; height: 80%;
overflow: scroll;
border: 1px solid #fff; border: 1px solid #fff;
background: rgb(36,36,36); background: rgb(36,36,36);
color: rgb(217,217,217); color: rgb(217,217,217);

View file

@ -18,6 +18,7 @@ window.onload = function() {
workspace.addChangeListener(function() { workspace.addChangeListener(function() {
// On a change, update the block explorer. // On a change, update the block explorer.
explorer.innerHTML = JSON.stringify(vm.runtime.blocks, null, 2); explorer.innerHTML = JSON.stringify(vm.runtime.blocks, null, 2);
window.hljs.highlightBlock(explorer);
}); });
// Run threads // Run threads