escape text to show html tags

cldougl · cldougl · commit 3ce3f552473e · 2015-10-13T11:30:19.000-04:00
diff --git a/_posts/plotly_js/annotations/2015-10-08-style-annotation-b.html b/_posts/plotly_js/annotations/2015-10-08-style-annotation-b.html
@@ -12,8 +12,8 @@
     y1 = d3.range(N).map( d3.random.normal(4) ),
     y2 = d3.range(N).map( d3.random.normal(4) ),
     y3 = d3.range(N).map( d3.random.normal(4) ),
-    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June',
-			  'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 
+    'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
     data = [{ x:x, y:y1, type:'scatter', name:'2014', text:months,
               mode:'markers', marker:{color:'rgba(200, 50, 100, .7)', size:16}
              },
@@ -25,7 +25,7 @@
                      size:16}}];
     layout = { 
         hovermode:'closest',
-        title:'<b>Formatting Annotations</b> <br> click on a point to plot an annotation',
+        title:'&lt;b&gt;Formatting Annotations&lt;/b&gt;&lt;br&gt; click on a point to plot an annotation',
         xaxis:{zeroline:false, title: 'Value A'},
         yaxis:{zeroline:false, title: 'Value B'}
      };
@@ -48,13 +48,13 @@
             bordercolor: point.fullData.marker.color,
             borderwidth: 3,
             borderpad: 4,
-            text: '<i>Series Identification</i><br>'+ 
-                  '<b>Year</b>       '+(point.data.name)+'<br>'+
-                  '<i>Point Identification</i><br>'+ 
-                  '<b>Month</b>      '+(months[point.pointNumber])+ 
-                  '<br><i>Point Values</i><br>'+
-                  '<b>A</b>     '+(point.x).toPrecision(4)+      
-                  '<br><b>B</b>     '+(point.y).toPrecision(4)           
+            text: '&lt;i&gt;Series Identification&lt;/i&gt;&lt;br&gt;'+ 
+                  '&lt;b&gt;Year&lt;/b&gt;       '+(point.data.name)+'&lt;br&gt;'+
+                  '&lt;i&gt;Point Identification&lt;/i&gt;&lt;br&gt;'+ 
+                  '&lt;b&gt;Month&lt;/b&gt;      '+(months[point.pointNumber])+ 
+                  '&lt;br&gt;&lt;i&gt;Point Values&lt;/i&gt;&lt;br&gt;'+
+                  '&lt;b&gt;A&lt;/b&gt;     '+(point.x).toPrecision(4)+      
+                  '&lt;br&gt;&lt;b&gt;B&lt;/b&gt;     '+(point.y).toPrecision(4)           
         },
         divid = document.getElementById('myDiv'),
         newIndex = (divid.layout.annotations || []).length;
