Custom HTML preview wrapper element option for custom CSS?

jamie's Avatar


28 Nov, 2023 09:13 PM

I'm working on a new blog template (and engine for that matter, but that's a different story) and trying to avoid the clutter of a div#wrapper. I'm also trying to use my CSS file directly and would like to avoid polluting it with styles only for Marked. To both ends, it would be nice if when defining my custom CSS I could also define a wrapping element to replace the div#wrapper. In my case, I would rather this was a simple <article> tag, but I could imagine it being very useful for other CMS kinds of use cases.

  1. Support Staff 1 Posted by Brett on 28 Nov, 2023 09:31 PM

    Brett's Avatar

    Hey Jamie,

    Quite a bit of Marked's functionality requires the #wrapper to be in
    place. The placement of HTML popups, the targeting of text elements,
    even the TOC all use the #wrapper div as a touchpoint. It's not
    something I can remove or replace easily.

    I might suggest that while Marked is great for previewing while working,
    if you're outputting to a CMS that has specific markup requirements,
    creating a pipeline that allows you to go directly from Markdown to the
    CMS with a custom template might be more appropriate. What CMS are you


    On 28 Nov 2023, at 15:15, Jamie Phelps wrote:

  2. 2 Posted by jamie on 28 Nov, 2023 09:38 PM

    jamie's Avatar

    I'm actually experimenting with a self-made blog engine just using Rack directly with Rack::Static and CommonMarker for Markdown rendering when needed. Very basic right now…

    Setting that aside, would it break anything to add a custom element inside the wrapper rather than replacing? Right now, in order for me to use my custom style.css, I have to add div#wrapper to all of my article styles in a way I'd rather avoid.

  3. Support Staff 3 Posted by Brett on 28 Nov, 2023 09:47 PM

    Brett's Avatar

    No, that wouldn't break anything (adding an article element inside of
    div#wrapper). Given you're using commonmarker and not either of the
    built-in renderers, you could create a custom processor that ran through
    commonmarker and output the HTML with the wrappers you want, then pass
    just the article container back to Marked and it would insert it inside
    of the div#wrapper. Let me know if you want a hand setting that up.


    On 28 Nov 2023, at 15:38, Jamie Phelps wrote:

  4. 4 Posted by jamie on 30 Nov, 2023 06:47 PM

    jamie's Avatar

    Oh, that's a neat idea. That would work quite well, just embedding a script into my new project. If you have any documentation handy that would make that easier to implement, would welcome a pointer!

  5. Support Staff 5 Posted by Brett on 30 Nov, 2023 07:54 PM

    Brett's Avatar

    I don't know if it will help, but you like Ruby, IIRC, so you might be able to pull some inspiration from here The last line runs it through the kramdown CLI, which could be replaced with commonmarker.

  6. Brett closed this discussion on 30 Nov, 2023 07:54 PM.

  7. jamie re-opened this discussion on 07 Dec, 2023 11:42 PM

  8. 6 Posted by jamie on 07 Dec, 2023 11:42 PM

    jamie's Avatar

    For anyone else coming to this thread, here's what I ended up with:

    # encoding: utf-8
    Dir.chdir File.expand_path("../..", __FILE__)
    require "bundler/setup"
    require "commonmarker"
    def class_exists?(class_name)
      klass = Module.const_get(class_name)
      return klass.is_a?(Class)
    rescue NameError
      return false
    if class_exists? 'Encoding'
      Encoding.default_external = Encoding::UTF_8 if Encoding.respond_to?('default_external')
      Encoding.default_internal = Encoding::UTF_8 if Encoding.respond_to?('default_internal')
      content ='utf-8')
      content =
    puts "<main><article>"
    puts CommonMarker.render_html(content, :DEFAULT)
    puts "</article></main>"

    I deleted most of the Jekyll/Octopress stuff. I also had to specify the specific path to my Ruby version installed with rbenv in order to get Bundler working properly. But now it's working great. Thanks!

  9. Support Staff 7 Posted by Brett on 08 Dec, 2023 01:09 AM

    Brett's Avatar

    Nice work!

    On Dec 7, 2023 at 5:42 PM -0600, jamie <[email blocked]>, wrote:

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac