Sample Generated Song Markup

The original, plain text:

{soc}
Would you [E7]like to swing on a [A7]star? 
Carry [D7]moonbeams home in a [G]jar?
And be [E7]better off than you [A7]are
   [D7]Or would you rather be a *[G]mule*?
{eoc}

A [G]mule is an [C]animal with [G]long funny [C]ears,
He [G]kicks up at [C]anything he [G]hears. [Em7]
His [A7]back is brawny but his [D]brain is weak,
He's [Em7]just plain [A7]stupid with a [D]stubborn [D7]streak.

And by the [G]way, if you [C]hate to go to [G]school, [E7] [Am7]
You may grow [D7]up to be a [G]mule.

{c:Repeat Chorus "rather be a *pig*?"}

And the same text after Scriptasaurus:

<div class="ugsChorus">
  <h5 class="ugsChorus">Chorus</h5>
  <pre class="ugsChords">
    Would you <code data-chordName="E7"><strong>[<em>E7</em>]</strong></code>like to swing on a <code data-chordName="A7"><strong>[<em>A7</em>]</strong></code>star? 
    Carry <code data-chordName="D7"><strong>[<em>D7</em>]</strong></code>moonbeams home in a <code data-chordName="G"><strong>[<em>G</em>]</strong></code>jar?
    And be <code data-chordName="E7"><strong>[<em>E7</em>]</strong></code>better off than you <code data-chordName="A7"><strong>[<em>A7</em>]</strong></code>are
    <code data-chordName="D7"><strong>[<em>D7</em>]</strong></code>Or would you rather be a *<code data-chordName="G"><strong>[<em>G</em>]</strong></code>mule*?
  </pre>
</div>
<pre class="ugsChords">
  A <code data-chordName="A"><strong>[<em>G</em>]</strong></code>mule is an <code data-chordName="C"><strong>[<em>C</em>]</strong></code>animal with <code data-chordName="G"><strong>[<em>G</em>]</strong></code>long funny <code data-chordName="C"><strong>[<em>C</em>]</strong></code>ears,
  He <code data-chordName="G"><strong>[<em>G</em>]</strong></code>kicks up at <cod data-chordName="C"e><strong>[<em>C</em>]</strong></code>anything he <code><strong>[<em>G</em>]</strong></code>hears. <code data-chordName="Em7"><strong>[<em>Em7</em>]</strong></code>
  His <code data-chordName="A7"><strong>[<em>A7</em>]</strong></code>back is brawny but his <code data-chordName="D"><strong>[<em>D</em>]</strong></code>brain is weak,
  He's <code data-chordName="Em7"><strong>[<em>Em7</em>]</strong></code>just plain <code data-chordName="A7"><strong>[<em>A7</em>]</strong></code>stupid with a <code data-chordName="E7"><strong>[<em>D</em>]</strong></code>stubborn <code data-chordName="D7"><strong>[<em>D7</em>]</strong></code>streak.
</pre>
<pre class="ugsChords">And by the <code data-chordName="G"><strong>[<em>G</em>]</strong></code>way, if you <code data-chordName="C"><strong>[<em>C</em>]</strong></code>hate to go to <code data-chordName="G"><strong>[<em>G</em>]</strong></code>school, <code data-chordName="E7"><strong>[<em>E7</em>] [<em>Am7</em>]</strong></code>
  You may grow <code data-chordName="D7"><strong>[<em>D7</em>]</strong></code>up to be a <code data-chordName="G"><strong>[<em>G</em>]</strong></code>mule.
</pre>
<h6 class="ugsComment">Repeat Chorus "rather be a *pig*?"</h6>
</div>

As you can see chords get wrapped within code, strong, and em tags. This allows us to play with their positioning a bit.

Next: applying some styles!