Update hellox3dom.html

a97614f8 · Mandic · 2aee5012 · a97614f8
Commit a97614f8 authored Apr 27, 2022 by Mandic
--- a/public/X3DOMTutorial/hellox3dom.html
+++ b/public/X3DOMTutorial/hellox3dom.html
@@ -5,6 +5,8 @@
  <title> Hello X3DOM </title>
  <link rel="stylesheet" type="text/css" href="x3dom.css">
  </link>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
 </head>

 <body>
@@ -23,6 +25,7 @@
            </Shape>
          </Scene>
        </X3D>
+        </p>
      </td>
      <td width="50%" align="left" valign="top" scope="col">
        In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the
@@ -33,16 +36,30 @@
        version.
        A local copy of the library is useful for development, if you are not always connected.
        <br>
-        <pre class="prettyprint">
-	&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
-	&lt;Scene&gt; 
-          &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
-            &lt;Shape id=box&gt; 
-              &lt;Box&gt; &lt;/Box&gt;
-            &lt;/Shape&gt;
-	  &lt;/Scene&gt;
-        &lt;/X3D&gt;  
-        </pre>
+<pre>
+<code class="language-html">
+  &lt;html&gt; 
+    &lt;head&gt; 
+      &lt;title&gt;My first X3DOM page&lt;/title&gt; 			
+      &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt; 
+      &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt; 
+    &lt;/head&gt; 
+    &lt;body&gt; 
+      &lt;h1&gt;Hello, X3DOM!&lt;/h1&gt; 
+      &lt;p&gt; 
+      &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
+        &lt;Scene&gt; 
+          &lt;background transparency='0' skyColor='0 0 1'&gt; &lt;/background&gt;
+          &lt;Shape id=box&gt; 
+            &lt;Box&gt; &lt;/Box&gt;
+          &lt;/Shape&gt;
+        &lt;/Scene&gt;
+      &lt;/X3D&gt; 
+      &lt;/p&gt; 
+    &lt;/body&gt; 
+  &lt;/html&gt;
+</code>
+</pre>            
        The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph.
        An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
          target="_blank"> X3D scene graph </a>
@@ -56,31 +73,31 @@
        The color of the background can be changed in the attribute skyColor. Currently it is red.
        The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color
          model </a>
-        with arithmetic notation (0.0 t0 1.0 per value). <br>
+        with arithmetic notation (0.0 to 1.0 per value). <br>
        The color of the Box can be changed by applying an appearance to the shape node.
        In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape
          node </a> associates a geometry node with
-        nodes that define that geometry's appearance. The following example draws a blue box.
-        <pre class="prettyprint">
-	&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
-	&lt;Scene&gt; 
-          &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
-            &lt;Shape id=box&gt; 
-              &lt;appearance &gt; 
-                &lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt; 
-              &lt;/appearance&gt; 
-              &lt;Box&gt; &lt;/Box&gt;
-            &lt;/Shape&gt;
-	  &lt;/Scene&gt;
-        &lt;/X3D&gt;  
-        </pre>
+        nodes that define that geometry's appearance. The following example draws a blue box.        
+<pre>
+  <code class="language-html">
+  &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
+    &lt;Scene&gt; 
+      &lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
+        &lt;Shape id=box&gt; 
+          &lt;appearance &gt; 
+            &lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt; 
+          &lt;/appearance&gt; 
+          &lt;Box&gt; &lt;/Box&gt;
+        &lt;/Shape&gt;
+      &lt;/Scene&gt;
+    &lt;/X3D&gt;
+  </code>
+</pre>         
        <shape>
          <box></box>
        </shape>
      </td>
-    </tr>
-  </table>
-  <script type="text/javascript" src="x3dom.js"></script>
+      <script type="text/javascript" src="x3dom.js"></script>
 </body>

-</html>
\ No newline at end of file
+</html>