Search code examples
androidkotlintextviewmarkdownmarkwon

Android Kotlin: how to set line spacing using Markwon heading break line


I tried searching the Markwon API and plugins, but I can't seem to find a way to add extra spacing between the lines. Does anyone know how to do this? Should I use a specific plugin or option from the library? Here an example of my code:

fun textToMarkdown(context: Context, text: String, textView: AppCompatTextView) {
    val markwon = Markwon.builder(context)
        .usePlugin(SoftBreakAddsNewLinePlugin.create())
        .usePlugin(object : AbstractMarkwonPlugin() {
            override fun configureSpansFactory(builder: MarkwonSpansFactory.Builder) {
                builder.setFactory(Heading::class.java) { _, props ->
                    val level = props.get(CoreProps.HEADING_LEVEL) ?: 0
                    val textAppearanceSpans = when (level) {
                        1 -> arrayOf(TextAppearanceSpan(context, R.style.H1Style))
                        2 -> arrayOf(TextAppearanceSpan(context, R.style.H2Style))
                        3 -> arrayOf(TextAppearanceSpan(context, R.style.H3Style))
                        4 -> arrayOf(TextAppearanceSpan(context, R.style.H4Style))
                        5 -> arrayOf(TextAppearanceSpan(context, R.style.H5Style))
                        6 -> arrayOf(TextAppearanceSpan(context, R.style.H6Style))
                        else -> arrayOf()
                    }
                    textAppearanceSpans
                }

            }
        })
        .build()

    if(text.isNotBlank()){
        val markdown = markwon.toMarkdown(text)
        markwon.setParsedMarkdown(textView, markdown)
        textView.visibility = View.VISIBLE
    }else{
        textView.visibility = View.GONE
    }
}

Thanks for the help!

I've tried to set setLineSpacing() on the textView and to try to set it for each span style but it didn't work. I was expecting to find a method or plugin within the Markwon library that would allow me to add extra space between lines of text when rendering Markdown, similar to how we can adjust lineSpacing in a standard TextView.


Solution

  • You can customize the line spacing by overriding the MarkwonVisitor.Builder and applying an AbsoluteSizeSpan to control the spacing between lines.

    Here’s the full implementation:

    fun textToMarkdown(context: Context, text: String, textView:AppCompatTextView){
    val dip4 = (context.resources.displayMetrics.density * 4 + .5F).toInt() //span line distance for formatted text
    val markwon = Markwon.builder(context)
        .usePlugin(SoftBreakAddsNewLinePlugin.create())
        .usePlugin(object : AbstractMarkwonPlugin() {
            override fun configureVisitor(builder: MarkwonVisitor.Builder) {
                builder.on(Heading::class.java) { visitor, heading ->
                    //set line distance
                    visitor.ensureNewLine()
                    val length = visitor.length()
                    visitor.visitChildren(heading)
                    CoreProps.HEADING_LEVEL.set(visitor.renderProps(), heading.level)
                    visitor.setSpansForNodeOptional(heading, length)
                    if (visitor.hasNext(heading)) {
                        // save current index
                        val start = visitor.length()
                        visitor.ensureNewLine()
                        visitor.forceNewLine()
                        // apply AbsoluteSizeSpan to new-line character
                        visitor.setSpans(start, AbsoluteSizeSpan(dip4))
                    }
                }
    
            }... your code ...
    

    This method ensures that additional line spacing is applied specifically where needed in the rendered Markdown content.

    Let me know if this solution works for you or if you need further clarification!