Markdown Support with markdown-it

Markdown is a simple, human-readable markup language designed to format plain text. For rendering on a web page, Markdown content needs to be converted to HTML. Survey Creator by SurveyJS supports Markdown via third-party Markdown-to-HTML JavaScript converters, such as markdown-it. This demo shows how you can integrate markdown-it with Survey Creator to allow survey authors to format textual content within their surveys using Markdown syntax.

As Survey Creator is built upon regular surveys from SurveyJS Form Library, you need to access internal survey instances to process Markdown content. Handle SurveyCreatorModel's onSurveyInstanceCreated event with a function. The function's options.survey parameter exposes one of the internal SurveyModel instances.

To enable Markdown support in Survey Creator, implement a function that handles SurveyModel's onTextMarkdown event. The function's options.text parameter contains a string value with Markdown content. Pass this value to the markdown-it converter to get HTML markup. Assign the result to the options.html property.

markdown-it can support HTML tags in the source if you enable the html property when instantiating the converter. However, this feature is considered unsafe because the converter allows any HTML markup to pass through, even if it contains malicious code. To ensure that the resulting HTML markup is safe, it must be processed through a sanitizer. This demo does not use any third-party sanitizer, as the SurveyJS Form Library includes basic sanitizing capabilities. However, these capabilities do not guarantee 100% protection against malicious code injections. We highly recommend using a dedicated sanitizing library in production code.

If you need advanced formatting capabilities (bullet points, numbered lists, hyperlinks, text alignment), you can integrate a rich content editor into Survey Creator. Refer to the following demo for more information:

Integrate a Third-Party Rich Content Editor