I&#39;m using [i18next][1] to power i18n for my weblog.  It works great on text-only content, but when I try to translate content that includes HTML markup, it is displaying the raw markup when I translate the text.

As an example, here is a snippet of the markup from a post that is not working as expected:

    &lt;div class=&quot;i18n&quot; data-i18n=&quot;content.body&quot;&gt;
      In Medell&#237;n they have many different types of &lt;i&gt;jugos naturales&lt;/i&gt;&amp;nbsp;(fruit juice) ... &lt;br /&gt;
      &lt;br /&gt;
      ...
    &lt;/div&gt;

The translation code looks like this:

    var resources = {
      &quot;en&quot;: ...,
      &quot;es&quot;: {
        &quot;translation&quot;: {
          &quot;content&quot;: {
            &quot;body&quot;: &quot;En Medell&#237;n hay varios tipos diferentes de &lt;i&gt;jugos naturales&lt;/i&gt; ... &lt;br /&gt;&lt;br /&gt; ... &quot;
          }
        }
      }
    }

    i18n.init({&quot;resStore&quot;: resources}, function( t ) {
      $(&#39;.i18n&#39;).i18n();
    });

When the translation is rendered, HTML tags are escaped and output as text:

    En Medell&#237;n hay varios tipos diferentes de &amp;lt;i&amp;gt;jugos naturales&amp;lt;/i&amp;gt;...&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;

How do I get i18next to change the HTML of translated elements?

[1]: http://i18next.com/

All I18next Solutions on Gang of Coders

Total of 1 I18next Solutions

HTML tags in i18next translation