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;
});
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Formatting with Markdown (Showdown) | Reactjs Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.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/babel" src="./index.js"></script>

</body>
</html>

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.

Convert Markdown to HTML with Showdown

Why we use cookies.