Stream: helpdesk (published)

Topic: absolute simplest way to add a simple CSS to my HTML


view this post on Zulip Expanding Man (Jan 27 2021 at 20:57):

I have a super simple server that I built with Mux.jl, most of the functionality is in responding to a few very simple HTTP calls. In addition, I have a few endpoints which return some helpful information, and are viewable in browsers. I can respond in markdown using the Markdown stdlib simply by doing html(Markdown.parse(str)). For the most part I'm thrilled with how nicely this works out, but there is one problem: unfortunately the default formatting in most browsers is completely garbage, even for simple text (bizarrely, it does not even seem to be able to handle simple UTF-8). So, I'm wondering, can I pick a super simple CSS and somehow shove it into the HTML response? I'm a little worried that I can't simply do this with the stdlib stuff, because it doesn't give me a convenient way of sticking in the CSS reference. Perhaps I can just write a function that always adds a simple line to the markdown? What should that look like?

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 22:11):

Are you serving the raw content from the html function? That does not include header etc so perhaps you can just embed that in another template.

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 22:12):

Or maybe Mux.jl adds stuff like that, I have never used it.

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 22:28):

Looks like it doesn't, so you can do it like this:

julia> using Markdown

julia> body = Markdown.html(Markdown.parse("""
       # Hello

       Some text
       """));

julia> fullpage = """
       <!doctype html>
       <html>
       <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <style>
       h1 {
         text-align: center;
       }
       </style>
       <head>
       <body>
       $(body)
       </body>
       </html>
       """;

and respond with that string. You can of course serve the css as a separate file and tell Mux about that endpoint somehow.

view this post on Zulip Expanding Man (Jan 27 2021 at 22:39):

Yes, what you are showing here is exactly what I'm doing now, what I want to know is exactly how I should serve the css (it can't really be a separate file because it needs to be in the same response)

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 22:41):

What do you mean then? My example above includes some css for the page.

view this post on Zulip Expanding Man (Jan 27 2021 at 22:42):

oh, sorry, I misunderstood what you did. Ah, yeah, so I can just look up a decent css and write a function like that

view this post on Zulip Expanding Man (Jan 27 2021 at 22:43):

I wonder if it's a problem for the browser that I don't include <html> or <body>. It doesn't complain about it, but it also looks like shit (though it is changing font sizes for headings and including bullet points, stuff like that)

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 22:48):

I don't think they are necessary, and apparently Google style guide recommends against it (when possible): https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags (from https://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags).

view this post on Zulip Expanding Man (Jan 27 2021 at 22:53):

cool, should be easy then. So I guess a "floating" <style> should work, right?

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 22:53):

Yea probably.

view this post on Zulip Expanding Man (Jan 27 2021 at 22:53):

oh, maybe I need <meta charset="UTF-8">, maybe that's why it was rendering it wrongly. Bizarre that's not the default, but at least it gives me something to try.

view this post on Zulip Expanding Man (Jan 27 2021 at 22:53):

thanks!

view this post on Zulip Expanding Man (Jan 27 2021 at 22:55):

btw, if you (or anyone else) know of particularly convenient ways of doing this with light Julia dependencies, that would be great. I'd like to not re-invent the wheel, but I'd also like simple lightweight dependencies that admit simple HTML strings. I was very pleased with how simple parsing the markdown into HTML turned out to be.

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 23:00):

Maybe worth having a look at https://github.com/MichaelHatherly/CommonMark.jl which, I believe, is superiour to the Markdown stdlib.

view this post on Zulip Fredrik Ekre (Jan 27 2021 at 23:00):

In particular it handles inline HTML in the markdown, which you probably will find useful. The Markdown stdlib can't handle that.

view this post on Zulip Expanding Man (Jan 27 2021 at 23:01):

Ah, that looks like exactly what I had in mind, thanks!

view this post on Zulip Expanding Man (Jan 28 2021 at 15:20):

Does anyone have any examples of using CommonMark.jl? I can't seem to get it to include anything in its output beyond the direct rendering of the original markdown string (i.e. can't get it to do any css or additional formatting)

view this post on Zulip Sebastian Pfitzner (Jan 28 2021 at 15:56):

That seems out of scope

view this post on Zulip Sebastian Pfitzner (Jan 28 2021 at 15:56):

You should probably include the generated HTML in a template that handles styling

view this post on Zulip Sebastian Pfitzner (Jan 28 2021 at 15:57):

also give GithubMarkdown.jl a go, although I think CommonMark.jl should be strictly more powerful

view this post on Zulip Expanding Man (Jan 28 2021 at 15:59):

I figured it out. It turned out not to be super useful for me though. I decided instead to just write a very simple HTML page template and interpolate what I get from the Markdown stdlib using Mustache.jl.


Last updated: Nov 22 2024 at 04:41 UTC