Question: Styling of markdown output (e.g., anchor tag color)

[ChristopherChudzicki]

Thanks for this great library!

The docs have been very helpful in learning how to customize the chat interface. One area I have struggled to find information on is styling the output of the markdown renderer. For example, if a chat response includes the markdown

The [deep-chat](https://deepchat.dev/) library is great because:
- it is customizable
- full featured
- and has great documentation

is there any way to control the styling of the anchor tag, list, etc?

[OvidijusParsiunas]

Hi @ChristopherChudzicki.

The styling of the markdown is controlled by the remarkable library, hence the styling of the resultant markup can't really be changed.

We plan to add support for the ability to add your own configuration for remarkable in the near future, however the styling changes that this would achieve is limited.

The only other way that the result can be changed is by defining your own markup via the html property in the MessageContent object.

Sorry that I can't help much more with this.

[ChristopherChudzicki]

@OvidijusParsiunas Thanks for the context! Not sure that the web-component's internal classnames are really intended to be part of the public API, but I ended up inserting a stylesheet into the shadow dom:

const insertStylesheet = (el: HTMLElement) => {
  if (!el.shadowRoot) return
  const sheet = el.shadowRoot.appendChild(document.createElement("style"))
  if (!sheet) return
  sheet.innerHTML = `
.text-message a {
  text-decoration: none;
  color: #750014;
}
.text-message a:hover {
  text-decoration: underline;
  color: #A31F34;
}
`
}