Markdown Attributes Syntax

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).
+- added the front matter capabilities (the title front matter option will be used for the page header).

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
 

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',