Achieve Ultimate Excellence

Integrating Markdown with Thymeleaf in Spring Boot

5 min read

In this blog post, we'll learn how to integrate Markdown with Thymeleaf in a Spring Boot application. Markdown is a lightweight markup language that allows you to write formatted text that can be easily converted to HTML. Thymeleaf, on the other hand, is a popular template engine for Java applications.

Dependencies

First, let's add the required dependencies to our project. We'll use spring-boot-starter-thymeleaf for Thymeleaf support and commonmark for processing Markdown.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>org.commonmark</groupId>
    <artifactId>commonmark</artifactId>
    <version>0.18.0</version>
</dependency>

Create the Thymeleaf Template

Next, we'll create a Thymeleaf template (HTML file) that contains our Markdown content. In the template, we'll use a custom attribute provided by our Thymeleaf dialect to process the Markdown.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:markdown="http://www.example.org/thymeleaf">

<head>
    <title>Markdown to HTML</title>
</head>

<body>
    <div markdown:toHtml="${yourMarkdownContent}"></div>
</body>

</html>

Create the Thymeleaf Dialect

To enable the custom attribute in our template, we need to create a Thymeleaf dialect. The dialect will contain a custom processor that converts the Markdown content to HTML using the CommonMark library.

import org.springframework.stereotype.Component;
import org.thymeleaf.dialect.AbstractProcessorDialect;
import org.thymeleaf.processor.IProcessor;

import java.util.HashSet;
import java.util.Set;

@Component
public class MarkdownDialect extends AbstractProcessorDialect {

    public static final String DIALECT_PREFIX = "markdown";

    MarkdownDialect() {
        super("Markdown Dialect", DIALECT_PREFIX, 1000);
    }

    @Override
    public Set getProcessors(String dialectPrefix) {
        Set processors = new HashSet<>();
        processors.add(new MarkdownProcessor(DIALECT_PREFIX));
        return processors;
    }

}

Implement the Markdown Processor

The Markdown processor will be responsible for converting the Markdown content to HTML. We'll use the commonmark library for this purpose.

import org.thymeleaf.context.ITemplateContext;
import org.thymeleaf.model.IProcessableElementTag;
import org.thymeleaf.processor.element.AbstractAttributeTagProcessor;
import org.thymeleaf.processor.element.IElementTagStructureHandler;

public class MarkdownProcessor extends AbstractAttributeTagProcessor {

    private static final String ATTR_NAME = "toHtml";
    private static final int PRECEDENCE = 10000;

    public MarkdownProcessor(final String dialectPrefix) {
        super(TemplateMode.HTML, dialectPrefix, null, false, ATTR_NAME, true, PRECEDENCE, true);
    }

    @Override
    protected void doProcess(
            final ITemplateContext context,
            final IProcessableElementTag tag,
            final AttributeName attributeName,
            final String attributeValue,
            final IElementTagStructureHandler structureHandler) {

        final IEngineConfiguration configuration = context.getConfiguration();
        final IStandardExpressionParser parser = StandardExpressions.getExpressionParser(configuration);
        final IStandardExpression expression = parser.parseExpression(context, attributeValue);
        final String markdownContent = (String) expression.execute(context);
        final String renderedMarkdown = renderMarkdown(markdownContent);
        structureHandler.setBody(renderedMarkdown, false);
    }

    private String renderMarkdown(String markdown) {
        Parser parser = Parser.builder().build();
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(parser.parse(markdown));
    }

}

Render Markdown in Your Thymeleaf Template

With the dialect and processor set up, you can now render Markdown content in your Thymeleaf templates.

<div markdown:toHtml="${'# My Markdown Content\\n\\nThis is **awesome**!'}"></div>

The above code will render the following HTML:

<div><h1>My Markdown Content</h1><p>This is <strong>awesome</strong>!</p></div>

Conclusion

In this blog post, we've seen how to integrate Markdown with Thymeleaf in a Spring Boot application. By using a custom Thymeleaf dialect and processor, we can easily convert Markdown content to HTML and render it in our templates.

I hope you found this post helpful. Happy coding!

Feel free to share this blog post content with others, and they can use your custom Thymeleaf processor to generate the corresponding HTML and render it on their websites. Let me know if you have any other questions or need further assistance!

Article By,