I was wondering how it was able to display a preview of the rendered Markdown table in the example below:
Hi
I rely on its Markdown capability a lot. My assumption is that has been trained on a lot of text in markdown format. And that knowing that the authors of the UI have taken advantage of that. Similar to how I take advantage of it using the API.
chatGPT does indeed know how to write stuff in markdown, but the rendering of the code block is done on the website. There’s more details in this thread:
Hi there!
That thread was about how ChatGPT identifies and sets the programming language for the (black) code boxes.
In this thread, I’m trying to know if or how ChatGPT can show us a preview of Markdown content from the code boxes as it did in the above screenshot where the table was nicely rendered below the code box.
I don’t think that ChatGPT renders the code boxes using Markdown code blocks instead of directly generating the html, but I could be wrong.
I’ve been trying to replace the plain Markdown text in the code boxes (when the programming language is set to markdown) with the rendered output using showdown, but the results are mitigated. It doesn’t seem to correctly parse Markdown tables.
I’ve been doing the above using the TamperMonkey Chrome extension with the following userscript:
// ==UserScript==
// @name Markdown to HTML for ChatGPT
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Convert Markdown inside md-block tags to HTML
// @author Your Name
// @match https://chat.openai.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant GM_registerMenuCommand
// @require https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js
// ==/UserScript==
/* global showdown */
(function () {
'use strict';
function md() {
const preElements = document.getElementsByTagName('pre');
for (let i = preElements.length - 1; i >= 0; i--) {
const preElement = preElements[i];
const codeElement = preElement.querySelector('code');
if (hasLanguageMarkdownClass(codeElement)) {
const mdBlockElement = document.createElement('md-block');
mdBlockElement.appendChild(codeElement);
preElement.parentNode.replaceChild(mdBlockElement, preElement);
}
}
}
function hasLanguageMarkdownClass(codeElement) {
if (codeElement && codeElement.classList.contains('language-markdown')) {
return true;
}
return false;
}
function convertMarkdownToHtml() {
const mdBlocks = document.querySelectorAll('md-block');
if (mdBlocks.length === 0) return;
const converter = new showdown.Converter();
mdBlocks.forEach((mdBlock) => {
const markdownText = mdBlock.textContent;
const htmlContent = converter.makeHtml(markdownText);
mdBlock.outerHTML = htmlContent;
});
}
function executeScript() {
md();
convertMarkdownToHtml();
}
// Register the menu command
GM_registerMenuCommand('Run Markdown to HTML for ChatGPT', executeScript);
})();
Obviously, it would be preferable to have the option to preview the Markdown from within ChatGPT.
Try this, it might be the answer you seek; I used Chrome.
For the ChatGPT page with the Markdown table rendered, click on the table and select Inspect.
Then using the search for all of the download, not the search for a specific file, search for markdown. Look at what appears.
Create a new page without any markdown and again do the search.
For what it’s worth, I ended up creating this Chrome extension to render Markdown code blocks provided that the programming language has been set to Markdown (which can be requested in the prompt). Now that it’s done, I’m not so sure that it’s useful! 
You can download the zip file from: https://github.com/odebroqueville/markdown-for-chatgpt
and load the extension in Developer mode.
EDIT: I’ve updated the CSS to improve on some of the results and removed the themes that were giving poor results.
1 Like
My experience is showing this case, as I am creating a program using the API the result format for at least two cases it gave me was a simple markdown for block code using the ``` mark.
With my program I put a UI webbrowser controller and before show to the user I apply to a markdown pre-processor that converts to HTML - it’s the markdown processor the one who identifies the language, by the way is doing a great job. If it’s the way the API does so I think that ChatGPT response is also sent to a processor before we see the results (I talking when we’re using the web browser).
By the way @odebroqueville thanks for the CSS, for me it will be very useful! My program relies on me to create the styles and now I have it all! Again very useful and thanks a lot!!