Use markdown to render images in title and question elements
Open in new window

SurveyJS supports markdown via onTextMarkDown event. You may use any JavaScript markdown library. In this example, we are using Showdown markdown. You may use all features that this or other libraries have.


Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model({ questions: [ 
    { type: "radiogroup", hasOther: true, isRequired: true, name: "favoritePet",
     title: "What is your favorite pet ![A parrot](http://surveyjs.org/images/markdown/image_16x16.svg =16x16) ?",
   choices: [ 
       { value: "dog", text: "Dog: ![A dog](http://surveyjs.org/images/markdown/dog.svg =14x14)" }, 
       {value: "cat", text: "Cat: ![A cat](http://surveyjs.org/images/markdown/cat.svg =14x14)"}, 
       {value: "parrot",text: "Parrot ![A parrot](http://surveyjs.org/images/markdown/parrot.svg =14x14)"} ]}
   ]
});
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});

//Create showdown mardown converter
var converter = new showdown.Converter();
survey.onTextMarkdown.add(function(survey, options){
    //convert the mardown text to html
    var str = converter.makeHtml(options.text);
    //remove root paragraphs <p></p>
    str = str.substring(3);
    str = str.substring(0, str.length - 4);
    //set html
    options.html = str;
});


survey.render("surveyElement");


<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Knockout</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.19/survey.ko.js"></script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}