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