How to implement JavaScript based _ tagged text _angularjs

How to implement JavaScript base _ tagged text

1. Mark content with basic text elements

First look at the display effect:

Corresponding HTML code:

<! DOCTYPE html>
 
 

corresponding element customary style:

* General expression Keywords and product name *
B{font-weight:bolder;}

* The general expression emphasizes *
em {font-style:italic;}

* General expression of foreign words or technical terms *
I {font-style:italic;}

* Generally indicates inaccuracy or correction *
s {text-decoration:line-through;}

* General expression of important text *
strong {Font-weight:bolder}

* General expression adds underline to text *
u {text-decoration:underline;}

* generally expressed as adding small font content *
small {font-size:small}

* General expression Add superscript and subscript *
sup {vertical-align:sub; font-size:smaller;}
Sub {vertical-align:super; font-size:smaller;}

2. Use language elements

Ruby, RT, and RP elements, first look at the effect:

Corresponding Code:

<p style= "FONT-SIZE:3EM;" >
  <ruby> 魑 <rp> (</rp><rt>chī</rt><rp>) </rp></ruby>
  <ruby> charm <rp> (</rp><rt>mèi</rt><rp>) </rp></ruby>
  <ruby > 魍 <rp> (</rp><rt>wǎng</rt><rp>) </rp></ruby>
  <ruby> Pixy < Rp> (</rp><rt>liǎng</rt><rp>) </rp></ruby>
</p>

3. Use pre-formatted content

The pre element can change how the browser handles the content, blocking the merging of whitespace characters and keeping the formatting in the source document.

<pre>
  <code>
    var fruits = ["apples", "oranges", "mangoes", "cherries"];
    for (Var i= 0, I < fruits.length; i++) {
      Document.writeln ("I like" + fruits[i]);
    }
  </code>
</pre>

Above this JavaScript base _ Mark Text implementation method is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.