Edit in JSFiddle

var json = { questions: [ { type: "radiogroup", hasOther: true, isRequired: true, name: "favoritePet", colCount: 2,
     title: "**What is your favorite pet** ?",
    choices: [{ value: "dog", text: "*Dog*" }, 
       {value: "cat", text: "**Cat**"}, 
       {value: "parrot",text: "**`Parrot`**"} ]}],
       completedHtml: "Your favorite pet is <b>{favoritePet}</b>."}

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

var survey = new Survey.Model(json);

survey.onComplete.add(function(result) {
	document.querySelector('#result').innerHTML = "result: " + JSON.stringify(result.data);
});

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;
});

$("#surveyElement").Survey({
  model: survey
});
<div id="surveyElement"></div>

<div id="result"></div>
.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
  
  &:hover, &:focus {
    background-color: #18a689;
    color: #fff;
  }
}

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