search

Vivify-Ideas / vue-simple-markdown

A Simple and Highspeed Markdown Parser for Vue
MIT License
83 stars 18 forks source link

Is it possible to pass HTML code in the text? #31

Open sterzuccio opened 4 years ago

sterzuccio commented 4 years ago

Hi, I would like to pass a portion of html code into the component. I use the component in this way: :<vue-simple-markdown :style="cssVars" class="mx-4 text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-medium text-left leading-4 md:pr-10 lg:pr-16" :source="item.text"></vue-simple-markdown> I would like to know if it is possible to pass a portion of html (precisely a span to color a part of the text) inside :suorce

MoxieEric commented 3 years ago

I had the same question and have started to solve it by using a postrender function after search turned up nothing. This is not a full solution as this would break code blocks and could certainly be improved upon, but shows the path to converting the html entities back to HTML.

Define a method within your template and pass that as the :postrender attribute. So far I have only seen it convert the opening and closing characters to HTML entities so it is a very simple find and replace. 

allowHtml(str) {
  if(str && typeof str === 'string') {
    // re-insert opening and closing tags
    str = str.replace(/\&lt\;/gi, '<');
    str = str.replace(/\&gt\;/gi, '>');
  }
  return str;
}
<vue-simple-markdown :style="cssVars" class="mx-4 text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-medium text-left leading-4 md:pr-10 lg:pr-16" :source="item.text" :postrender="allowHtml"></vue-simple-markdown>

If this existed as a setting that would b great.