Convert Markdown to HTML with Showdown


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "elements": [
    {
      "type": "matrix",
      "name": "vacation-factors",
      "title": "Please indicate **how important the following factors are** for your vacation?",
      "columns": [
        {
          "value": 1,
          "text": "Not<br>important<br>1"
        },
        {
          "value": 2,
          "text": "<br><br>2"
        },
        {
          "value": 3,
          "text": "<br><br>3"
        },
        {
          "value": 4,
          "text": "<br><br>4"
        },
        {
          "value": 5,
          "text": "Very<br>important<br>5"
        }
      ],
      "rows": [
        {
          "value": "luxuries",
          "text": "*Indulgent luxuries*"
        },
        {
          "value": "beaches",
          "text": "*Quality beaches*"
        },
        {
          "value": "culture",
          "text": "*Cultural activities*"
        },
        {
          "value": "cuisine",
          "text": "*Unique cuisine*"
        },
        {
          "value": "wildlife",
          "text": "*Interaction with local wildlife*"
        },
        {
          "value": "nightlife",
          "text": "*Nightlife*"
        },
        {
          "value": "shopping",
          "text": "*Shopping*"
        }
      ]
    }
  ],
  "showQuestionNumbers": false
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
// Instantiate Showdown
const converter = new showdown.Converter();
survey.onTextMarkdown.add(function(survey, options){
    // Convert Markdown to HTML
    let str = converter.makeHtml(options.text);
    // Remove root paragraphs <p></p>
    str = str.substring(3);
    str = str.substring(0, str.length - 4);
    // Set HTML markup to render
    options.html = str;
});
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Formatting with Markdown (Showdown) | jQuery Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

Markdown is a markup language designed to format plain text and maintain human readability. For publishing, Markdown content is usually converted to a more advanced language, such as HTML. SurveyJS supports Markdown via third-party Markdown-to-HTML JavaScript converters. This demo shows SurveyJS integration with the Showdown converter.

To enable Markdown support in your survey, implement a function that handles the onTextMarkdown event. The function's second parameter, options, has the text property that contains a string value with Markdown content. Pass this value to the Showdown converter to get HTML markup. Note that the converter wraps the passed Markdown string into an unnecessary paragraph (<p> tag). Remove this tag and assign the result to the options.html property.

Now you can add formatting to your string values. Refer to the Markdown Cheat Sheet to get acquainted with Markdown syntax. This demo shows a Matrix question. Markdown is used to highlight a phrase in the question title with bold and render statements in the rows in italic. You can combine Markdown syntax with raw HTML in string values. In this demo, <br> tags are used to insert line breaks into column header texts.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.