Home → Suggestions →

Custom HTML preview wrapper element option for custom CSS?

• Edit

jamie

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

   

   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
   using?

   -Brett

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

   • Edit

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

   

   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.

   • Edit

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

   

   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.

   -Brett

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

   • Edit

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

   

   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!

   • Edit

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

   

   I don't know if it will help, but you like Ruby, IIRC, so you might be able to pull some inspiration from here https://brettterpstra.com/2013/01/04/previewing-jekyll-posts-with-marked/. The last line runs it through the kramdown CLI, which could be replaced with commonmarker.

   • Edit

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

   

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

   #!/opt/homebrew/rbenv/versions/3.2.2/bin/ruby
   # 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
   end
   
   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')
   end
   
   begin
     content = STDIN.read.force_encoding('utf-8')
   rescue
     content = STDIN.read
   end
   
   
   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!

   • Edit

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

   

   Nice work!

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

   • Edit