From c1bd8b8e5e16866a80e0c7268b56e585846557af Mon Sep 17 00:00:00 2001
From: Roberto Butti <roberto.butti@gmail.com>
Date: Tue, 3 Sep 2024 23:38:09 +0200
Subject: [PATCH] Markdown Attributes Syntax

---
 CHANGELOG.md                      |  6 +++++-
 readme.md                         | 30 ++++++++++++++++++++++++++++++
 src/Commands/BaseBuildCommand.php |  3 +++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6861116..bee627b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.2 - 3rd September 2024
+- Adding Markdown custom extension for managing attributes (like CSS class)
+- Updating dependencies
+
 ## 1.1.1 - 24th Aug 2024
 - Updating dependencies
 - Updating some styles/fonts for Headings
@@ -77,4 +81,4 @@
 - using Pint with PSR12
 - added configuration for cover image (instead of using hard-coded cover.jpg, you can specify a new file name and format, for example, my-cover.png)
 - added the header config for the CSS style for the page header
-- added the front matter capabilities (the title front matter option will be used for the page header).
\ No newline at end of file
+- added the front matter capabilities (the title front matter option will be used for the page header).
diff --git a/readme.md b/readme.md
index be18417..c4221ab 100644
--- a/readme.md
+++ b/readme.md
@@ -256,6 +256,36 @@ This is an example.
 
 Edit your `/ibis.php` configuration files to define the font files to be loaded from the `/assets/fonts` directory. Afterward, you may use the defined fonts in your themes (`/assets/theme-light.html` & `/assets/theme-dark.html`).
 
+### Setting the Attributes
+
+Considering that the process of converting Markdown to PDF involves generating HTML, you can apply CSS styles to set specific class styles.
+To add a CSS class (or any attribute) to an element in Markdown, you can use attribute syntax.
+
+For example, to add a CSS class to an image, consider that the conversion from Markdown results in an HTML `p` element containing an `img` element.
+You can define a CSS style like this:
+
+```css
+.image-container {
+    text-align: center; /* Center the content inside the paragraph */
+    padding: 20px; /* Optional: Add padding around the paragraph */
+    background-color: #f5f5f5; /* Optional: Set a background color */
+    border-radius: 10px; /* Optional: Add rounded corners */
+}
+
+.image-container img {
+    max-width: 80vw; /* Set the image to 80% of the viewport width */
+    height: auto; /* Maintain the aspect ratio */
+    display: inline-block; /* Ensure the image behaves like an inline-block element */
+}
+```
+
+Then, when you need to embed an image in Markdown using the image-container CSS class, you can use the following syntax:
+
+```md
+{#id-cover-001 .image-container}
+![Ibis Next Cover Image](./content/images/ibis-next-cover.png)
+```
+
 
 ## Generating eBook
 
diff --git a/src/Commands/BaseBuildCommand.php b/src/Commands/BaseBuildCommand.php
index a96e070..f0c448e 100644
--- a/src/Commands/BaseBuildCommand.php
+++ b/src/Commands/BaseBuildCommand.php
@@ -6,6 +6,7 @@
 use Ibis\Markdown\Extensions\Aside;
 use Ibis\Markdown\Extensions\AsideExtension;
 use Ibis\Markdown\Extensions\AsideRenderer;
+use League\CommonMark\Extension\Attributes\AttributesExtension;
 use SplFileInfo;
 
 use Illuminate\Filesystem\Filesystem;
@@ -75,6 +76,8 @@ protected function buildHtml(string $path, array $config): Collection
         $environment->addExtension(new TableExtension());
         $environment->addExtension(new FrontMatterExtension());
         $environment->addExtension(new AsideExtension());
+        $environment->addExtension(new AttributesExtension());
+
 
         $environment->addRenderer(FencedCode::class, new FencedCodeRenderer([
             'html', 'php', 'js', 'bash', 'json',