Merge pull request #1357 from hydephp/add-markdown-configuration-options-for-tailwind-prose-classes

emmadesilva · web-flow · commit a750550ea90a · 2023-03-27T18:00:13.000+02:00
Add Markdown configuration option for the Tailwind prose classes
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -10,7 +10,7 @@ This serves two purposes:
 2. At release time, you can move the Unreleased section changes into a new release version section.
 
 ### Added
-- for new features.
+- Added Markdown configuration option for the Tailwind prose classes in https://github.com/hydephp/develop/pull/1357
 
 ### Changed
 - for changes in existing functionality.
diff --git a/config/markdown.php b/config/markdown.php
@@ -80,4 +80,19 @@
     */
 
     'enable_blade' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Tailwind Typography Prose Classes
+    |--------------------------------------------------------------------------
+    |
+    | HydePHP uses Tailwind Typography to style rendered Markdown.
+    |
+    | This setting controls the base classes to apply to all the HTML elements
+    | containing rendered markdown. Please note that if you add any new
+    | classes, you may need to recompile your CSS file.
+    |
+    */
+
+    'prose_classes' => 'prose dark:prose-invert',
 ];
diff --git a/docs/digging-deeper/advanced-markdown.md b/docs/digging-deeper/advanced-markdown.md
@@ -183,3 +183,18 @@ the `allow_html` option to `true` in your `config/markdown.php` file.
 ```
 
 This will add and configure the `DisallowedRawHtml` CommonMark extension so that no HTML tags are stripped out.
+
+### Tailwind Typography Prose Classes
+
+HydePHP uses the [Tailwind Typography](https://tailwindcss.com/docs/typography-plugin) to style rendered Markdown.
+We do this by adding the `.prose` CSS class to the HTML elements containing the rendered Markdown, using the built-in Blade components.
+
+You can easily edit these classes, for example if you want to customize the prose colours, in the `config/markdown.php` file.
+
+```php
+// filepath: config/markdown.php
+'prose_classes' => 'prose dark:prose-invert', // [tl! remove]
+'prose_classes' => 'prose dark:prose-invert prose-img:inline', // [tl! add]
+```
+
+Please note that if you add any new classes, you may need to recompile your CSS file.
diff --git a/packages/framework/config/markdown.php b/packages/framework/config/markdown.php
@@ -80,4 +80,19 @@
     */
 
     'enable_blade' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Tailwind Typography Prose Classes
+    |--------------------------------------------------------------------------
+    |
+    | HydePHP uses Tailwind Typography to style rendered Markdown.
+    |
+    | This setting controls the base classes to apply to all the HTML elements
+    | containing rendered markdown. Please note that if you add any new
+    | classes, you may need to recompile your CSS file.
+    |
+    */
+
+    'prose_classes' => 'prose dark:prose-invert',
 ];
diff --git a/packages/framework/resources/views/components/docs/documentation-article.blade.php b/packages/framework/resources/views/components/docs/documentation-article.blade.php
@@ -3,7 +3,8 @@
 @endphp
 
 <article id="document" itemscope itemtype="https://schema.org/Article" @class([
-        'mx-auto lg:ml-8 prose dark:prose-invert max-w-3xl p-12 md:px-16 max-w-[1000px] min-h-[calc(100vh_-_4rem)]',
+        'mx-auto lg:ml-8 max-w-3xl p-12 md:px-16 max-w-[1000px] min-h-[calc(100vh_-_4rem)]',
+        config('markdown.prose_classes', 'prose dark:prose-invert'),
         'torchlight-enabled' => $document->hasTorchlight()])>
     @yield('content')
 
diff --git a/packages/framework/resources/views/components/post/article.blade.php b/packages/framework/resources/views/components/post/article.blade.php
@@ -1,6 +1,6 @@
 <article aria-label="Article" id="{{ $page->identifier }}" itemscope
          itemtype="https://schema.org/Article"
-    @class(['post-article mx-auto prose dark:prose-invert', 'torchlight-enabled' => Features::hasTorchlight()])>
+    @class(['post-article mx-auto', config('markdown.prose_classes', 'prose dark:prose-invert'), 'torchlight-enabled' => Features::hasTorchlight()])>
     <meta itemprop="identifier" content="{{ $page->identifier }}">
     @if($page->getCanonicalUrl() !== null)
         <meta itemprop="url" content="{{ $page->getCanonicalUrl() }}">
diff --git a/packages/framework/resources/views/layouts/page.blade.php b/packages/framework/resources/views/layouts/page.blade.php
@@ -3,7 +3,7 @@
 @section('content')
 
     <main id="content" class="mx-auto max-w-7xl py-16 px-8">
-        <article @class(['mx-auto prose dark:prose-invert', 'torchlight-enabled' => Features::hasTorchlight()])>
+        <article @class(['mx-auto', config('markdown.prose_classes', 'prose dark:prose-invert'), 'torchlight-enabled' => Features::hasTorchlight()])>
             {{ $content }}
         </article>
     </main>
