Activate monospace font inside codeblocks in the post editor

AI-generated summary

The discussion revolves around a feature request to automatically use a monospace font inside code blocks in the Discourse post editor. @meglio initiated the conversation, explaining the impracticality of typing aligned code with non-monospace fonts.

@IAmGav provided an example of how code blocks are displayed, but @meglio clarified that the request is for the font to be different in the composer, not just in the cooked post.

@pfaffman and @merefield mentioned a WYSIWYG editor plugin, but @meglio expressed concerns about its unofficial status and potential issues.

@pfaffman suggested a work-around using CSS to make the composer use a fixed-width font. @Falco questioned the possibility of changing font-family in a subset of a text area content, and later concluded that it’s not possible to have different font-families for different lines of content in a text area.

@Johani suggested using a text editor for large code snippets, but @meglio clarified that they were seeking a technical solution to the specific problem.

In the end, @Falco suggested setting the whole composer to use a monospace font using CSS, which @meglio implemented and found to be working as desired.

For a medium-to-large code blocks, it’s very impractical to type them with alignment, as people usually do in the code, because a non-monospace is used.

This is a feature request to automatically use monospace font inside the code blocks where we edit the post content.

1 Like

you mean something like this ?

if(expression)
{
    statement;
    statement;
}
else
{
    statement;
    statement;
}

Hm, not sure what you’re asking about exactly?

He wants the font to be different in the composer, not just in the cooked post.

3 Likes

@spirobel is working on a WYSIWYG editor …

2 Likes

This is great. However, it has been said multiple times that the Discourse team is not going to support a wysiwyg editor officially any time soon, and any non-official plugins in this area are very prone to issues and are hard to keep up to date. I wouldn’t use a non-official plugin in the community I’m launching.

… which is confirmed by the plugin’s author’s recent post:

1 Like

Which is why I pointed you to that plugin :slight_smile:

1 Like

Another work-around would be to just use CSS to make the composer be fixed-width font. If you have a code-heavy community, that would make sense.

1 Like

Is it even possible to change the font-family in just a subset of a text area content ?

4 Likes

Why would you even type a medium-to-large code snippet in the composer? That’s what text editors are for.

Type your code in the text editor of your choice (Atom, Visual Studio, Sublime text…etc.), then copy it to the composer in Discourse.

1 Like

Note that I’m not asking for opinions or advice about why I should not do what I want to do.

I’m asking for a technical solution to a very particular problem I described above.

I don’t think it’s possible to have a text area in a browser have multiple different font-family for different lines of content. So considering Discourse composer is text-area based, and this isn’t something we plan to change in the near future I don’t see how to address your feature request.

The best you could do is set the whole composer to use a mono spaced font using CSS. Maybe even restrict that change to a specific category or tag.

2 Likes

Done that, thanks. Working great, same as when composing wiki entries in Github - they too seem to have mono font in the editor.

1 Like