gradio: `gr.Chatbot` does not display code blocks correctly

I find a solution to fix this. Let result returns from LLM firstly get parse.

def parse_codeblock(text):
    lines = text.split("\n")
    for i, line in enumerate(lines):
        if "```" in line:
            if line != "```":
                lines[i] = f'<pre><code class="{lines[i][3:]}">'
            else:
                lines[i] = '</code></pre>'
        else:
            if i > 0:
                lines[i] = "<br/>" + line.replace("<", "&lt;").replace(">", "&gt;")
    return "".join(lines)

@FrankWhh Can you confirm this pr #3816 fixes your issue?

nope.

if you use render, it will include block element in md. all code will included in <pre>. don’t forget to apply ‘prose’ css to chatbot. elem_classses=“prose”

no syntax highlight though.

i think better to keep the md render at client side. thus when use chatbot both as input and output, the value will always be markdown. currently if you output md to chatbot you will get rendered html when you use it in input

i changed renderInline to render, anyway i want to render full feature markdown in chatbot

gradio==3.22.1

self.md.renderInline("test \n\n test") 

produces:

"test<br>\n<br>\ntest"

if the chat history having a line break, it will keep adding <br>s as the conversation goes on

it show like this:

python def quick_sort(arr): if len(arr) <= 1: return arr else: pivot = arr[0] left = [] right = [] for i in range(1, len(arr)): if arr[i] < pivot: left.append(arr[i]) else: right.append(arr[i]) return quick_sort(left) + [pivot] + quick_sort(right)