[Question]Customise Header color

• Markwon version: {3.0.0}

I am looking to implement a different colour for the headers. Also, I’ve seen someone asked this in past with this https://github.com/noties/Markwon/issues/32. Looks like SpannableMarkdownVisitor contract has been changed.

I’ve tried the below code and the issue with the code is the header is not being visible after my change and even it doesn’t show the default color.

 Markwon.builder(context)
                .usePlugin(object : AbstractMarkwonPlugin() {
                    override fun configureVisitor(builder: MarkwonVisitor.Builder) {
                        builder.on(Heading::class.java) { visitor, heading ->

                            val start = visitor.length()

                            visitor.setSpans(start, ForegroundColorSpan(Color.BLACK))

                            super.configureVisitor(builder)
                        }
                    }
                })
                .build()

Could you please let me know how this can be achieved now.

[noties]

Hello @nksaroj !

You place it in a custom plugin, of cause 😄 !

.usePlugin(new AbstractMarkwonPlugin() {
    @Override
    public void configureSpansFactory(@NonNull MarkwonSpansFactory.Builder builder) {

        final SpanFactory original = builder.requireFactory(ListItem.class);

        // please note that this factory is used for both bullet and ordered lists
        builder.setFactory(ListItem.class, new SpanFactory() {
            @Override
            public Object getSpans(@NonNull MarkwonConfiguration configuration, @NonNull RenderProps props) {

                // if you would like to detect which type of list it is ->
                final CoreProps.ListItemType type = CoreProps.LIST_ITEM_TYPE.require(props);
                switch (type) {
                    case BULLET:
                        break;
                    case ORDERED:
                        break;
                }

                return new Object[]{
                        original.getSpans(configuration, props),
                        new LastLineSpacingSpan(400)
                };
            }
        });
    }
})

BTW, I’m going to add addFactory method for easier factories management, it will published with next SNAPSHOT.

Now, bullet size. Well, you cannot easily change it’s width. First of all - because a bullet item cannot modify metrics. (So no line height change, no left margin will grow to fit a bigger bullet item). Currently it’s width calculated like this:

bulletMaximumWidth = Math.min(blockMargin, lineHeight) / 2
if (bulletWidth > bulletMaximumWidth) {
  return bulletMaximumWidth
} else {
  return bulletWidth
}

So, it cannot be greater than half of blockMargin or lineHeight (whatever is smaller). Please note, that it can be less. blockMargin is a property of MarkwonTheme. It controls the right margin for text content for bullet-list, ordered-list, block-quote and task-list. If you increase it and also increase line height -> then you can also make bullet greater.

.usePlugin(new AbstractMarkwonPlugin() {
    @Override
    public void configureTheme(@NonNull MarkwonTheme.Builder builder) {
        // you can pass here a relatively big value, it will be 
        // adjusted anyway by calculations that I had mentioned above
        builder.bulletWidth(128);
    }
})

bulletListItemStrokeWidth is working. Although its name is not clear, I agree that it can be confusing. All it does is — control the stroke width of a bullet point of the second level list, see the second line:

• first
  • second

[noties]

Hello @nksaroj !

Version 3.0.0 allows customizing spans via factory. So you no longer need to customize visitor. What you are asking can be achieved like this:

.usePlugin(new AbstractMarkwonPlugin() {
    @Override
    public void configureSpansFactory(@NonNull MarkwonSpansFactory.Builder builder) {

        // obtain _origin_ factory to use it with our custom one
        // NB, `requireFactory` is relatively new method that is still in 3.0.1-SNAPSHOT
        // older versions have `getFactory` which returns nullable object
        final SpanFactory origin = builder.requireFactory(Heading.class);

        // register you own
        builder.setFactory(Heading.class, new SpanFactory() {
            @Override
            public Object getSpans(@NonNull MarkwonConfiguration configuration, @NonNull RenderProps props) {

                // here you can also check for heading level for further customizations
                final int level = CoreProps.HEADING_LEVEL.require(props);

                // return an array of spans (origin heading + our color)
                return new Object[]{
                        origin.getSpans(configuration, props),
                        new ForegroundColorSpan(Color.GREEN)
                };
            }
        });
    }
})

The snippet that you had shared could’ve also work, but it needs a few changes:

.usePlugin(new AbstractMarkwonPlugin() {
    @Override
    public void configureVisitor(@NonNull MarkwonVisitor.Builder builder) {
        builder.on(Heading.class, new MarkwonVisitor.NodeVisitor<Heading>() {
            @Override
            public void visit(@NonNull MarkwonVisitor visitor, @NonNull Heading heading) {

                final int start = visitor.length();

                // this is important to visit children
                visitor.visitChildren(heading);

                // if you are passing span logic to a factory we should indicate the heading level
                CoreProps.HEADING_LEVEL.set(visitor.renderProps(), heading.getLevel());
                // let visitor apply spans from specific SpannableFactory
                visitor.setSpansForNode(heading, start);

                // OR, you can set your spans here directly
                visitor.setSpans(start, new ForegroundColorSpan(Color.BLACK));
                // NB, original HeadingSpan is not used here, but this can be changed
                // or you can use your own span for heading
                visitor.setSpans(start, new HeadingSpan(visitor.configuration().theme(), heading.getLevel()));

                // additional new-line after heading
                if (visitor.hasNext(heading)) {
                    visitor.ensureNewLine();
                    visitor.forceNewLine();
                }
            }
        });
    }
})

So, it’s up to you to pick the solution that works for you. But I had added SpanFactory exactly for easier customization of spans that are used (so you don’t have to use visitor until you absolutely need to)