Dedicated Markdown Component

Do you guys still want a dedicated Markdown Component?

  • Yes
  • No
  • Maybe
0 voters

Feel free to comment below in more detail about exactly what you need (or don’t need).

UPDATE Video in the comment below demoing how the Markdown Component will work :wink:

I initially voted yes, @dan.

The question, however, is: where do you see the potential advantages or disadvantages of a dedicated Markdown component?

A Markdown component would be for those that like to write and work in Markdown. The text styles would be managed by the Typography settings in the Theme Studio.

Okay, then maybe not after all.

In that case, it probably makes more sense to adapt the Typography component so that it works optimally together with Theme Studio, allowing all styling options—such as links, lists, bullet points, tables, and so on—to be configured there.

1 Like

We already support link styling in Typography, and list support is coming soon.

For Markdown, we would only support standard Markdown, which means no tables. Table support is something that should be handled separately via a dedicated component.

So far the styling is working as expected. However, I’m currently struggling with the font style in the bullet lists in my blog.

Unfortunately, the font style of the list items keeps getting overridden and doesn’t match the rest of the content.

You can see an example here:

This is the CSS class setup I’m using. Am I doing something wrong, or is this simply not working properly yet? @dan

/* Paragraphs */
[&_p]:!font-body

/* Lists */
[&_ul]:list-disc
[&_ul]:pl-6
[&_ul]:mt-3
[&_ul]:mb-3
[&_ul]:!font-body

/* List items + markers */
[&_li]:my-1
[&_li]:!font-body
[&_li_*]:!font-body
[&_li::marker]:text-brand
[&_li::marker]:!font-body

/* Links (global) */
[&_a]:!font-body
[&_a]:text-brand-500
[&_a]:underline-offset-2
[&_a:hover]:underline

/* Blockquote */
[&_blockquote]:relative
[&_blockquote]:p-5
[&_blockquote]:bg-brand
[&_blockquote]:rounded-xl
[&_blockquote]:border
[&_blockquote]:shadow-sm
[&_blockquote]:my-6
[&_blockquote]:flex
[&_blockquote]:items-center
[&_blockquote]:justify-center
[&_blockquote]:text-center
[&_blockquote]:!font-body
[&_blockquote]:!text-white

/* Blockquote inner text */
[&_blockquote_*]:!font-body
[&_blockquote_p]:!text-white
[&_blockquote_span]:!text-white

It’ll be something to do with how you’re styling the lists, noit an Elements bug. I asked ChatGPT, he suggests this…

  • The list markup on the example page is standard ul/li, so this is almost certainly a CSS specificity issue rather than Markdown itself.
  • Can you inspect a problematic li and tell me which font-family rule is winning in devtools?
  • In the meantime, try targeting ul > li directly, which usually fixes overrides:
[&_ul>li]:!font-body
[&_ul>li>*]:!font-body

I voted yes. But I hope this isn’t an either/or situation (add Markdown component or fix Typography).

As you know I’ve been exploring and using the CMS. So much so that I’m using it for things other than “blog.” Having the choice of using the CMS or using a Markdown component in a design, I believe, opens up new design opportunities while keeping how I create text (via OneMarkdown and Typeit4me) consistent. For a “production” site (constant publication as opposed to the more static stays-the-same-other-than-blog-page sites that many are creating), consistency makes rolling out new pages and information faster, so I’ll vote for it every time.

Meanwhile, Typography doesn’t free you from “designing.” Yes, it ties more directly to the Theme Studio, but it doesn’t support embedded HTML, images, videos, etc. So for a site constantly producing new pages of information you’re asking the “writer” to also be a “designer.” CMS and Markdown use the way I’m doing it currently don’t have that problem.

Ultimately, what we really need is MarsEdit or its equivalent, that writes directly to a Elements component, whether that be the CMS or a Markdown component. I’d consider that an add-on to Elements and would be willing to pay for it, and I think others would, too.

Meanwhile, let me echo @pegasus about CMS styling: there’s something that’s not quite right or we don’t quite understand. Fiddling with Advanced/CSS Classes sometimes seems to work, sometimes it seems like something is fighting that.

@dan
Thanks for your support. In the end, it wasn’t an issue with the body font. The problem was that the following classes also need to be applied to the list styling so they match the paragraph settings from the Typography component:

•	font-normal
•	leading-[1.40]
•	tracking-[0.05em]
•	text-brand-500

Once those were added, the styling matched correctly.

My setup now looks like this.

/* ================================
   GLOBAL TYPOGRAPHY
================================ */
font-body
font-normal
leading-[1.40]
tracking-[0.05em]
text-brand-500


/* ================================
   PARAGRAPHS
================================ */
[&_p]:!font-body
[&_p]:leading-[1.40]
[&_p]:tracking-[0.05em]


/* ================================
   LISTS
================================ */
[&_ul]:list-disc
[&_ul]:pl-6
[&_ul]:mt-3
[&_ul]:mb-3
[&_ul]:!font-body

[&_li]:my-1
[&_li]:!font-body
[&_li]:leading-[1.40]
[&_li]:tracking-[0.05em]
[&_li]:text-text-400

/* Only bullets / numbers */
[&_li::marker]:text-brand-500
[&_li::marker]:!font-body


/* ================================
   LINKS (explicit – wins against list rules)
================================ */
[&_a]:!font-body
[&_a]:text-brand-500
[&_a]:underline-offset-2
[&_a:hover]:underline


/* ================================
   JUSTIFY LIST CONTENT
================================ */
[&_li]:text-justify
[&_li>*]:text-justify


/* ================================
   BLOCKQUOTE
================================ */
[&_blockquote]:relative
[&_blockquote]:p-5
[&_blockquote]:bg-brand
[&_blockquote]:rounded-xl
[&_blockquote]:border
[&_blockquote]:shadow-sm
[&_blockquote]:my-6
[&_blockquote]:flex
[&_blockquote]:items-center
[&_blockquote]:justify-center
[&_blockquote]:text-center
[&_blockquote]:!font-body
[&_blockquote]:!text-white

[&_blockquote_p]:!text-white
[&_blockquote_span]:!text-white

If anyone else is interested or has a similar use case, feel free to use this setup and adapt it to your own needs or website.

In particular, the justified list content won’t be relevant for everyone and can be removed if it’s not needed.

Here’s a sneak peek at the Markdown support @tpbradley has been working on…

By the way, I’m demoing it in a Custom Component, so it’s not as straightforward as it will be once we have it as an officially built-in component, but hopefully you get the idea of how it will work :slight_smile:

7 Likes

I suggest that Tables should be supported. For the Markdown component to be really useful, then it would be worth supporting the Extended Syntax. If it is only going to be vanilla Markdown, then I am not sure what value it gives above and beyond using the Typography component (once updated).

Doing Tables is very easy in Markdown:

giving e.g. :

I have been using the PHP Parsedown module to render Markdown and that supports tables.

2 Likes

Based on video, this looks useful. Used for CMS as well?

Yes, that’s pretty much exactly what I asked for last year.

One thing I’d like to see added is dragging an .MD file from the Finder into that lower area and have it become the Markdown (I have a lot of Markdown files, and dragging is faster than copy and paste).

@dan This will be a game-changer for me, so I hope to see this soon, as I have just started working on a process documentation browsing facility on one of my sites that uses MD files. Awesome.

Still valuable to me with only the vanilla MD support, but table support in the future would be great.

Hi Dan, This is just what I was looking for in November… This way I do not have to rewrite the text content from my old RW sites as I convert them to Elements. ( This is great work, Thank you for your efforts )

1 Like

Are you putting this in Advanced/CSS Classes, or somewhere else?

typo-component → Advanced/CSS Classes

Of the over 2000+ who purchased Elements, 101 view of this post, 14 votes for markdown

Not saying this does not move Elements forward and attract new customers

But how many of those users will use markdown?

Just a question

Using statistics, a sample of 101 from a population of 2000 predicts very well. If the sample is representative of those actually using Elements, it predicts even better.

So the answer to your question is likely 10-20% of Elements users as they understand the product today. Are that many using the CMS?

However, users are generally the worst product designers. You could ask the question “Should we make Elements faster?” on this forum and get a far higher yes response. Does that mean Realmac should drop their other projects and work on speeding up Elements? No.

I have argued from the beginning (literally) that we either need a Markdown Component or we need a far, far better Typography Component. Not all sites are just pretty landing pages with fancy designs. Some sites try to convey information, and often lots of it. From the standpoint of selling more copies of Elements, it would it be easier for Realmac to say to users “use the complicated CMS” or use the simpler text-savvy Component in your design? Moreover, in trying to convert Classic users who might have been using the Styled Text pages, the missing Elements Component is exactly that (we’re also missing the .htaccess editor).

So I support the idea. I’ll use the idea (and create a massive site using it). The more example sites doing different things that are out there, the more Elements looks like the product to use.