diff --git a/docs/syntax/images.md b/docs/syntax/images.md index ebcafdcb6..97b92f01e 100644 --- a/docs/syntax/images.md +++ b/docs/syntax/images.md @@ -96,6 +96,13 @@ If `H` is omitted `W` is used as the height as well. ![alt](img.png "=50%") ``` +When specifying just the size without a title, no space is required before the `=` sign. When combining a title with sizing, a space is required before the `=`: + +```markdown +![alt](img.png "=50%") +![alt](img.png "My Title =50%") +``` + ### SVG diff --git a/src/Elastic.Markdown/Myst/InlineParsers/DiagnosticLinkInlineParser.cs b/src/Elastic.Markdown/Myst/InlineParsers/DiagnosticLinkInlineParser.cs index 0f2f1b614..2880646f5 100644 --- a/src/Elastic.Markdown/Myst/InlineParsers/DiagnosticLinkInlineParser.cs +++ b/src/Elastic.Markdown/Myst/InlineParsers/DiagnosticLinkInlineParser.cs @@ -40,7 +40,7 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer) { } internal sealed partial class LinkRegexExtensions { - [GeneratedRegex(@"\s\=(?\d+%?)(?:x(?\d+%?))?$", RegexOptions.IgnoreCase, "en-US")] + [GeneratedRegex(@"(?:^|\s)\=(?\d+%?)(?:x(?\d+%?))?$", RegexOptions.IgnoreCase, "en-US")] public static partial Regex MatchTitleStylingInstructions(); } @@ -92,7 +92,7 @@ private static void ParseStylingInstructions(LinkInline link, ParserContext cont attributes.AddProperty("width", width); attributes.AddProperty("height", height); - title = title[..matches.Index]; + title = title[..matches.Index].TrimEnd(); } link.Title = title.ReplaceSubstitutions(context); } diff --git a/tests/Elastic.Markdown.Tests/Inline/InlineImageTest.cs b/tests/Elastic.Markdown.Tests/Inline/InlineImageTest.cs index 40af3f948..3bcaae6a1 100644 --- a/tests/Elastic.Markdown.Tests/Inline/InlineImageTest.cs +++ b/tests/Elastic.Markdown.Tests/Inline/InlineImageTest.cs @@ -39,3 +39,93 @@ public void GeneratesAttributesInHtml() => """

Elasticsearch

""" ); } + +// Test image sizing with space before = +public class InlineImageWithSizingSpaceBeforeTest(ITestOutputHelper output) : InlineTest(output, +""" +![Elasticsearch](/_static/img/observability.png " =50%") +""" +) +{ + [Fact] + public void ParsesBlock() => Block.Should().NotBeNull(); + + [Fact] + public void GeneratesAttributesInHtml() => + // language=html + Html.ShouldContainHtml( + """

Elasticsearch

""" + ); +} + +// Test image sizing without space before = +public class InlineImageWithSizingNoSpaceBeforeTest(ITestOutputHelper output) : InlineTest(output, +""" +![Elasticsearch](/_static/img/observability.png "=50%") +""" +) +{ + [Fact] + public void ParsesBlock() => Block.Should().NotBeNull(); + + [Fact] + public void GeneratesAttributesInHtml() => + // language=html + Html.ShouldContainHtml( + """

Elasticsearch

""" + ); +} + +// Test image sizing with pixels +public class InlineImageWithPixelSizingTest(ITestOutputHelper output) : InlineTest(output, +""" +![Elasticsearch](/_static/img/observability.png "=250x330") +""" +) +{ + [Fact] + public void ParsesBlock() => Block.Should().NotBeNull(); + + [Fact] + public void GeneratesAttributesInHtml() => + // language=html + Html.ShouldContainHtml( + """

Elasticsearch

""" + ); +} + +// Test image sizing with title and sizing +public class InlineImageWithTitleAndSizingTest(ITestOutputHelper output) : InlineTest(output, +""" +![Elasticsearch](/_static/img/observability.png "My Title =50%") +""" +) +{ + [Fact] + public void ParsesBlock() => Block.Should().NotBeNull(); + + [Fact] + public void GeneratesAttributesInHtml() => + // language=html + Html.ShouldContainHtml( + """

Elasticsearch

""" + ); +} + +// Test image sizing with width only +public class InlineImageWithWidthOnlyTest(ITestOutputHelper output) : InlineTest(output, +""" +![Elasticsearch](/_static/img/observability.png "=250") +""" +) +{ + [Fact] + public void ParsesBlock() => Block.Should().NotBeNull(); + + [Fact] + public void GeneratesAttributesInHtml() => + // language=html + Html.ShouldContainHtml( + """

Elasticsearch

""" + ); +}