Add Markdown Support to NetJournal Web Journal

In the previous post, we tackled the core backend logic of building the web journal NetJournal from scratch.

Now it's time to address the user experience. Nobody wants a journal that only supports text + emoji + ASCII art.

So, thinking about it, the best solution would be Markdown.

Inspiration

I asked GPT, and it gave a great example.

https://devv.ai/zh/search?threadId=dbr3kt6te3uo

The core code is this little snippet

document.getElementById('markdown-content').addEventListener('input', function () {

const markdownContent = document.getElementById('markdown-content').value;

const htmlPreview = document.getElementById('html-preview');

htmlPreview.innerHTML = marked.parse(markdownContent);

});

Practice

Copy this snippet into our index.html, add a card that shows the rendered effect of the Markdown text we're currently typing.

We can also integrate this rendering effect into the display list.

function buildValueMarkdown(longUrl) {

let valueMarkdown = document.createElement('div')

valueMarkdown.classList.add("form-control")

valueMarkdown.innerHTML = marked.parse(longUrl)

return valueMarkdown

}

buildValueItemFunc = buildValueMarkdown

During debugging, I found an issue. If I write relatively complex content in my journal, it will contain symbols like [] ! () #, along with line breaks.

When I call the API in index.html to query a single record, it reports an error about the JSON format. But when I use loadKV to query everything, it works fine.

I looked at the code and found that the loadKV implementation uses the API's qryAll command. It first uses JSON.parse to build a preliminary JSON structure, fills the data structure with some JS syntax, and then uses JSON.stringify to convert it to JSON data before returning it via HTTP.