Rename .markdown class to .prose (#2605)

.changeset/prose-class-alias.md

@@ -0,0 +1,7 @@
+---
+"@tabler/core": patch
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Added `.prose` alias for markdown content and updated preview/docs references and redirects.

core/scss/ui/_markdown.scss

@@ -2,8 +2,9 @@ $markdown-font-size: var(--#{$prefix}font-size-h3) !default;
 $markdown-line-height: var(--#{$prefix}line-height-lg) !default;
 
 /**
-Markdown
+Prose (formerly markdown)
  */
+.prose,
 .markdown {
   line-height: $markdown-line-height;
   font-size: $markdown-font-size;

docs/content/ui/base/markdown.md

@@ -0,0 +1,7 @@
+---
+title: Markdown
+layout: redirect
+redirect:
+  to: ui/base/prose/
+permalink: ui/base/markdown/
+---

docs/content/ui/base/prose.md

@@ -0,0 +1,145 @@
+---
+title: Prose
+summary: Use the `.prose` wrapper to style long-form content without adding classes to every element.
+bootstrapLink: content/prose/
+description: Long-form content styles for markdown-like HTML.
+---
+
+## How it works
+
+Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables, and other common elements. This is especially useful when rendering Markdown, MDX, or content from a WYSIWYG editor.
+
+- Sets a base `font-size` and `line-height` for comfortable reading.
+- Normalizes list spacing and nested list indentation.
+- Adds consistent `margin-bottom` on headings and paragraphs.
+- Gives blockquotes, code, and tables a readable default style.
+
+## Example
+
+This example shows typical content wrapped in `.prose`.
+
+{% capture html -%}
+<div class="prose">
+  <h1>Getting started with documentation</h1>
+  <p>
+    Writing clear and effective documentation is essential for any project. When you create content that others
+    will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users
+    understand complex concepts quickly and efficiently.
+  </p>
+  <blockquote>
+    <p>Documentation is a love letter that you write to your future self.</p>
+  </blockquote>
+  <p>
+    The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs.
+  </p>
+</div>
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
+
+## Inline HTML elements
+
+HTML provides a long list of inline tags. These are commonly used inside `.prose`.
+
+- **Bold text** uses `<strong>`.
+- *Italic text* uses `<em>`.
+- ==Highlighting== uses `<mark>`.
+- Abbreviations like HTML use `<abbr>` with a `title`.
+- Citations use `<cite>`.
+- Deleted text uses `<del>` and inserted text uses `<ins>`.
+- Superscript uses `<sup>` and subscript uses `<sub>`.
+
+Most of these elements are styled by browsers with only light adjustments from Tabler.
+
+## Headings
+
+Headings help readers scan long documents quickly. Use them to create a clear hierarchy and maintain a logical flow.
+
+### Code
+
+Inline code is available with `<code>`. For multi-line snippets, use `<pre><code>`.
+
+{% capture html -%}
+<div class="prose">
+  <p>Inline code looks like <code>console.log("Hello")</code> and uses monospace styling.</p>
+  <pre><code>// Create a function that returns a sum
+function add(a, b) {
+  return a + b;
+}
+</code></pre>
+</div>
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
+
+### Lists
+
+Use ordered lists for steps and unordered lists for related points.
+
+{% capture html -%}
+<div class="prose">
+  <ol>
+    <li>Start with the most important information.</li>
+    <li>Provide context before technical details.</li>
+    <li>Include practical examples.</li>
+  </ol>
+  <ul>
+    <li>Write clear, concise list items.</li>
+    <li>Keep the structure consistent.</li>
+    <li>Avoid overly long items.</li>
+  </ul>
+</div>
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
+
+### Images
+
+Images should support the text and provide useful context.
+
+{% capture html -%}
+<div class="prose">
+  <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" />
+  <img src="/static/photos/book-on-the-grass.jpg" alt="Book on the grass" />
+  <img src="/static/photos/stylish-workspace-with-macbook-pro.jpg" alt="Workspace with laptop" />
+</div>
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
+
+### Tables
+
+Tables work best for comparing related data points.
+
+{% capture html -%}
+<div class="prose">
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Up-votes</th>
+        <th>Down-votes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alice</td>
+        <td>10</td>
+        <td>11</td>
+      </tr>
+      <tr>
+        <td>Bob</td>
+        <td>4</td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>Charlie</td>
+        <td>7</td>
+        <td>9</td>
+      </tr>
+      <tr>
+        <td>Totals</td>
+        <td>21</td>
+        <td>23</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+{%- endcapture %}
+{% include "docs/example.html" html=html %}

docs/content/ui/base/typography.md

@@ -244,12 +244,12 @@ To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-## Markdown elements
+## Prose
 
-If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements.
+If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.prose` class in a container. It will apply the default styles for markdown elements. The `.markdown` class is an alias and will be removed in a future release. The `.wysiwyg` integration (`ui/wysiwyg.html`) is deprecated and will be removed in a future release. See the Prose page for full examples.
 
 {% capture html -%}
-<div class="markdown">
+<div class="prose">
   <h1>Hello World</h1>
   <p>
     Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus

preview/pages/changelog.html

@@ -1,7 +1,7 @@
 ---
 title: Changelog
 page-menu: changelog
-layout: markdown
+layout: prose
 permalink: changelog.html
 ---
 

preview/pages/emails.html

@@ -18,7 +18,7 @@ permalink: emails.html
 				<div class="row align-items-center">
 					<div class="col-10">
 						<h3 class="h1">Tabler Emails</h3>
-						<div class="markdown text-secondary fs-3">
+						<div class="prose text-secondary fs-3">
 							{{ emails | size }} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
 						</div>
 						<div class="mt-3">
@@ -62,7 +62,7 @@ permalink: emails.html
 					</div>
 					<div class="col-6">
 						<div class="p-7">
-							<div class="markdown">
+							<div class="prose">
 								<h3 data-email-title></h3>
 								<p data-email-description></p>
 							</div>

preview/pages/illustrations.html

@@ -107,7 +107,7 @@ permalink: illustrations.html
 				<div class="row align-items-center">
 					<div class="col-10">
 						<h3 class="h1">Tabler Illustrations</h3>
-						<div class="markdown text-secondary">
+						<div class="prose text-secondary">
 							Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
 						</div>
 						<div class="mt-3">

preview/pages/license.html

@@ -10,7 +10,7 @@ permalink: license.html
 	<div class="col-lg-8">
 		<div class="card card-lg">
 			<div class="card-body">
-				<div class="markdown">
+				<div class="prose">
 					{% capture license %}{% include "license.md" %}{%- endcapture %}
 					{{ license | renderContent: "md" }}
 				</div>

preview/pages/markdown.html

@@ -0,0 +1,6 @@
+---
+layout: redirect
+redirect:
+  to: prose.html
+permalink: markdown.html
+---

preview/pages/marketing/text.html

@@ -13,7 +13,7 @@ permalink: marketing/text.html
 
 <section class="section pt-0">
 	<div class="container container-narrow">
-		<div class="markdown">
+		<div class="prose">
 			<p>Why? Be quiet! <strong> We shall say 'Ni' again to you, if you do not appease us.</strong> <em> The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur.</em> That is why I am your king.</p>
 		<h2>Oh, ow!</h2>
 		<p>Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! It's only a model. Well, what do you want? And this isn't my nose. This is a false one. We found them.</p>

preview/pages/prose.md

@@ -1,9 +1,9 @@
 ---
-title: Markdown
-page-header: Markdown
-page-menu: base.markdown
-layout: markdown
-permalink: markdown.html
+title: Prose
+page-header: Prose
+page-menu: base.prose
+layout: prose
+permalink: prose.html
 ---
 
 # Who's that then?
@@ -71,7 +71,6 @@ Well, I got better. Shut up! Will you shut up?! Well, I got better. I don't want
 # Typographic elements
 
 
-
 ## Emphasis
 
 **This is bold text**

preview/pages/terms-of-service.html

@@ -8,7 +8,7 @@ permalink: terms-of-service.html
 <div class="card card-md">
 	<div class="card-body">
 		<h3 class="card-title">{{ page.title }}</h3>
-		<div class="markdown">
+		<div class="prose">
 			{% capture license %}{% include "terms-of-service.md" %}{%- endcapture %}
 			{{ license | renderContent: "md" }}
 		</div>

preview/pages/text-features.html

@@ -10,7 +10,7 @@ permalink: text-features.html
 	<div class="col-7">
 		<div class="card card-lg">
 			<div class="card-body">
-				<div class="markdown">
+				<div class="prose">
 					<h3>Text features</h3>
 
 					<p>HTML provides various tags to format text and add meaning. For example, <strong>important words</strong> can be highlighted, and <em>emphasized text</em> can be italicized.</p>
@@ -47,7 +47,7 @@ permalink: text-features.html
 	<div class="col">
 		<div class="card card-lg">
 			<div class="card-body">
-				<div class="markdown">
+				<div class="prose">
 					{% for i in (1..6) %}
 						<h{{ i }}>Heading {{ i }} by <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a></h{{ i }}>
 					{% endfor %}

preview/pages/typography.html

@@ -9,45 +9,45 @@ permalink: typography.html
 <div class="card card-lg">
 	<div class="card-body ">
 		<div class="row g-4">
-			<div class="col-12 markdown">
+			<div class="col-12 prose">
 				<h1>1/1 Text</h1>
 				<p>I'm not a witch. Now, look here, my good man. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! Well, I didn't vote for you. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Bring her forward! He hasn't got shit all over him. He hasn't got shit all over him. We shall say 'Ni' again to you, if you do not appease us.</p>
 				<p>Well, we did do the nose. Why? Now, look here, my good man. Be quiet! Well, what do you want?</p>
 			</div>
 
-			<div class="col-md-6 markdown">
+			<div class="col-md-6 prose">
 				<h2>1/2 Text</h2>
 				<p>What do you mean? We shall say 'Ni' again to you, if you do not appease us. I have to push the pram a lot. No, no, no! Yes, yes. A bit. But she's got a wart. What a strange person.</p>
 			</div>
 
-			<div class="col-md-6 markdown">
+			<div class="col-md-6 prose">
 				<h2>1/2 Text</h2>
 				<p>And this isn't my nose. This is a false one. We found them. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
 			</div>
 
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>1/3 Text</h3>
 				<p>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Why? Well, what do you want? …Are you suggesting that coconuts migrate?</p>
 			</div>
-			<div class="col-md-8 markdown">
+			<div class="col-md-8 prose">
 				<h3>2/3 Text</h3>
 				<p>Well, I got better. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Found them? In Mercia?! The coconut's tropical! A newt? …Are you suggesting that coconuts migrate?</p>
 			</div>
 
-			<div class="col-md-8 markdown">
+			<div class="col-md-8 prose">
 				<p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! We want a shrubbery!!</p>
 				<p>Well, how'd you become king, then? Found them? In Mercia?! The coconut's tropical! Oh, ow! I am your king.</p>
 			</div>
 
-			<div class="col-md-3 markdown">
+			<div class="col-md-3 prose">
 				<h4>Small Text</h4>
 				<p>Well, Mercia's a temperate zone! You don't vote for kings. Now, look here, my good man. </p>
 				<p class="text-secondary small lh-base">Who's that then? Well, we did do the nose.</p>
 			</div>
 
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Unordered list</h3>
 				<ul>
 					<li>lorem ipsum doloret</li>
@@ -62,7 +62,7 @@ permalink: typography.html
 				</ul>
 			</div>
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Ordered list</h3>
 				<ol>
 					<li>lorem ipsum doloret</li>
@@ -74,7 +74,7 @@ permalink: typography.html
 				</ol>
 			</div>
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Unstyled list</h3>
 				<ul class="list-unstyled">
 					<li>lorem ipsum doloret</li>
@@ -87,7 +87,7 @@ permalink: typography.html
 			</div>
 
 
-			<div class="col-12 markdown">
+			<div class="col-12 prose">
 				<h3>Blockquote</h3>
 
 				<blockquote class="blockquote">
@@ -96,7 +96,7 @@ permalink: typography.html
 				</blockquote>
 			</div>
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Text elements</h3>
 
 				<div>You can use the mark tag to <mark>highlight</mark> text.</div>
@@ -108,7 +108,7 @@ permalink: typography.html
 				<div>The following snippet of text show useful keyboard shortcut: <kbd>⌘</kbd> + <kbd>C</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
 			</div>
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Text color</h3>
 				<div class="text-primary">This is an example of primary text.</div>
 				<div class="text-secondary">This is an example of secondary text.</div>
@@ -120,7 +120,7 @@ permalink: typography.html
 				<div class="text-pink">This is an example of pink text.</div>
 			</div>
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Addresses</h3>
 				<address><strong>Twitter, Inc. <br> </strong>1355 Market Street, Suite 900 <br>
 					San Francisco, CA 94103 <br><abbr title="Phone">P: </abbr>(123) 456 7890
@@ -128,7 +128,7 @@ permalink: typography.html
 				<address><strong>Full name <br></strong><a href="mailto:#">first.last@example.com</a></address>
 			</div>
 
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3>Typography</h3>
 
 				<div>

shared/data/menu.json

@@ -157,9 +157,9 @@
         "url": "modals.html",
         "title": "Modals"
       },
-      "markdown": {
-        "title": "Markdown",
-        "url": "markdown.html"
+      "prose": {
+        "title": "Prose",
+        "url": "prose.html"
       },
       "navigation": {
         "url": "navigation.html",

shared/includes/cards/icons-banner.html

@@ -10,7 +10,7 @@
 		<div class="row align-items-center">
 			<div class="col-10">
 				<h3 class="h1">Tabler Icons</h3>
-				<div class="markdown">
+				<div class="prose">
 					All icons come from the Tabler Icons set and are MIT-licensed. Visit
 					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">Tabler Icons Website</a>,
 					download any of the {{ icons-count }} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.

shared/includes/marketing/sections/faq.html

@@ -4,30 +4,30 @@
 			<h2 class="section-title">Frequently Asked Questions</h2>
 		</div>
 		<div class="row g-lg-4">
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3 class="h2">How is Tabler Pro different from Tabler?</h3>
 				<p class="text-secondary">Tabler offers fundamental components that you can piece together to build your app or website. However, Tabler Pro offers an elevated convenience by providing pre-assembled components and page templates, acting as ready-to-use building blocks that can be swiftly integrated into your app, thereby saving development time.</p>
 			</div>
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3 class="h2">Is this a yearly subscription?</h3>
 				<p class="text-secondary">Certainly, you have lifelong access to all our components. This implies that you will receive new components and updates every month, continuing as long as we have new component ideas to share.</p>
 			</div>
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3 class="h2">I want to buy this but I can't afford it. Is there a discount?</h3>
 				<p class="text-secondary">Should you be a student or find the cost excessively high in your local currency, please reach out to us at {{ site.email }} detailing your circumstances, and we will contemplate offering you a discount.</p>
 			</div>
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3 class="h2">What can I do with this license?</h3>
 				<ul class="text-secondary">
 					<li>To build your websites or SaaS project that end-users need to pay</li>
 					<li>To build an open-source tool or documentation website</li>
 				</ul>
 			</div>
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3 class="h2">What version of Tabler is used?</h3>
 				<p class="text-secondary">The elements in Tabler Pro are created using Tabler v1.2 and later versions. If your current version is v0.8, we advise you to update to the latest version to make the most of the Pro components.</p>
 			</div>
-			<div class="col-md-4 markdown">
+			<div class="col-md-4 prose">
 				<h3 class="h2">What restrictions does this license have?</h3>
 				<ul class="text-secondary">
 					<li>Create a clone of Tabler PRO to sell</li>

shared/layouts/docs/default.html

@@ -111,7 +111,7 @@
 				<div class="col bg-docs-gradient">
 					<div class="py-lg-5 ps-lg-5">
 						<div class="py-6 ps-lg-6 p-xxl-6">
-							<div class="markdown" data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="50px 0px -0%" data-bs-smooth-scroll="true" tabindex="0">
+							<div class="prose" data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="50px 0px -0%" data-bs-smooth-scroll="true" tabindex="0">
 								<h1>
 									{{ title }}
 								</h1>

shared/layouts/prose.html

@@ -5,9 +5,9 @@ layout: default
 <div class="row justify-content-center">
 	<div class="col-lg-10 col-xl-9">
 		<div class="card card-lg">
-			<div class="card-body markdown">
+			<div class="card-body prose">
 				{{ content }}
 			</div>
 		</div>
 	</div>
-</div>
+</div>