Formatting the output with HTML and inline CSS

If you are using your Blockly program to generate Smart Pascal code only (or to generate JavaScript directly with the slight modification indicated below) you can add HTML tags and CSS inline styles to make the output more attractive. This demonstration shows some of the effects that you can achieve. On the following page we demonstrate how to display an image and also a hyperlink. In these examples all of the portions of text to be formatted are known in advance. In the final example we show a way of highlighting in a supplied paragraph of text each occurrence of a string of characters supplied by the user.

You can also output unicode characters that represent objects. For example, ♕ displays a white chess queen. See this w3schools page for others to try.

The blocks

The blocks

XML Code of Blocks

<xml xmlns="http://www.w3.org/1999/xhtml">
  <block id="/$:}u$GJ3]E!_@j@j/ue" type="variables_set" y="13" x="88">
    <field name="VAR">strText</field>
    <value name="VALUE">
      <block id="EHc9dT$(D9dMM=)Kp(Pc" type="text">
        <field name="TEXT">&lt;div style = "background-color:#ccc;"&gt;&lt;h2 style="color:blue; text-align: center;"&gt;Centred Blue Heading&lt;/h2&gt;</field>
      </block>
    </value>
    <next>
      <block id="7f]u%c$87Yl:q.12H*xG" type="text_append">
        <field name="VAR">strText</field>
        <value name="TEXT">
          <shadow id=",e`b7pBE7qIn(PGl2!fU" type="text">
            <field name="TEXT">&lt;p style="color:red;font-size:14px;font-family: times;"&gt;Red paragraph with font size 14px in Times font&lt;/p&gt;</field>
          </shadow>
        </value>
        <next>
          <block id=")k#S:+c^R-U][pNn?U]7" type="text_append">
            <field name="VAR">strText</field>
            <value name="TEXT">
              <shadow id="P99]1cilmOy#xP8ikmew" type="text">
                <field name="TEXT">&lt;p style="color:green;font-size:14px;font-family:courier;"&gt;Green paragraph with font size 14px in Courier font&lt;/p&gt;&lt;/div&gt;</field>
              </shadow>
            </value>
            <next>
              <block id="cVXC+rw%h%pCTl33royn" type="text_append">
                <field name="VAR">strText</field>
                <value name="TEXT">
                  <shadow id="f@p:DO]$QkY!kH1zskzG" type="text">
                    <field name="TEXT">&lt;p style="color:orange;font-size:14px;font-family:arial;"&gt;Orange paragraph with font size 14px in Arial font&lt;/p&gt;</field>
                  </shadow>
                </value>
                <next>
                  <block id="tMTw+].$`T=xM_8_u]1p" type="text_append">
                    <field name="VAR">strText</field>
                    <value name="TEXT">
                      <shadow id="q,n#Tjg{u0buQcw,{DzP" type="text">
                        <field name="TEXT">Individual words &lt;small&gt;small&lt;/small&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;em&gt;emphasised&lt;/em&gt; and &lt;mark&gt;highlighted&lt;/mark&gt;</field>
                      </shadow>
                    </value>
                    <next>
                      <block id="g)w_TVae7iZ_g%99U?la" type="text_append">
                        <field name="VAR">strText</field>
                        <value name="TEXT">
                          <shadow id="UZ@zi{%ijYU/#H$wB=0w" type="text">
                            <field name="TEXT">&lt;br&gt;Line break then subscript in H&lt;sub&gt;2&lt;/sub&gt;O and superscript in x&lt;sup&gt;2&lt;/sup&gt;</field>
                          </shadow>
                        </value>
                        <next>
                          <block id="oKX:w(2eb15qlFr|:v6I" type="text_print">
                            <value name="TEXT">
                              <shadow id="$m$d%*ofez`Bb8nbGdFF" type="text">
                                <field name="TEXT">abc</field>
                              </shadow>
                              <block id="`sqYXgr/i;(6VH2Lpz8|" type="variables_get">
                                <field name="VAR">strText</field>
                              </block>
                            </value>
                          </block>
                        </next>
                      </block>
                    </next>
                  </block>
                </next>
              </block>
            </next>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

Generated Smart Pascal Code

var strText: String;



strText := '<div style = "background-color:#ccc;"><h2 style="color:blue; text-align: center;">Centred Blue Heading</h2>';
strText += '<p style="color:red;font-size:14px;font-family: times;">Red paragraph with font size 14px in Times font</p>';
strText += '<p style="color:green;font-size:14px;font-family:courier;">Green paragraph with font size 14px in Courier font</p></div>';
strText += '<p style="color:orange;font-size:14px;font-family:arial;">Orange paragraph with font size 14px in Arial font</p>';
strText += 'Individual words <small>small</small>, <i>italic</i>, <em>emphasised</em> and <mark>highlighted</mark>';
strText += '<br>Line break then subscript in H<sub>2</sub>O and superscript in x<sup>2</sup>';
Console.writeln(strText);
    

Screenshot of Output

Output

Output

Using the same blocks to generate JavaScript directly

The JavaScript output from the Blockly Playground prints the text with the command window.alert(strText);. If you change this to document.write(strText); and put the code into an empty HTML document and open it with a web browser you can see your formatted output:
<!DOCTYPE html><html>
  <head>
    <script>
      var strText;


      strText = '<div style = "background-color:#ccc;"><h2 style="color:blue; text-align: center;">Centred Blue Heading</h2>';
      strText = String(strText) + String('<p style="color:red;font-size:14px;font-family: times;">Red paragraph with font size 14px in Times font</p>');
      strText = String(strText) + String('<p style="color:green;font-size:14px;font-family:courier;">Green paragraph with font size 14px in Courier font</p></div>');
      strText = String(strText) + String('<p style="color:orange;font-size:14px;font-family:arial;">Orange paragraph with font size 14px in Arial font</p>');
      strText = String(strText) + String('Individual words <small>small</small>, <i>italic</i>, <em>emphasised</em> and <mark>highlighted</mark>');
      strText = String(strText) + String('<br>Line break then subscript in H<sub>2</sub>O and superscript in x<sup>2</sup>');
      document.write(strText);
    </script>
  </head>
  <body>
  </body>
</html> 

Programming - a skill for life!

XML, images and generated Pascal code of examples