Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/syntax/images.md
Original file line number Diff line number Diff line change
Expand Up @@ -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%") <!-- Just size, no space needed -->
![alt](img.png "My Title =50%") <!-- With title, space required -->
```



### SVG
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer) { }

internal sealed partial class LinkRegexExtensions
{
[GeneratedRegex(@"\s\=(?<width>\d+%?)(?:x(?<height>\d+%?))?$", RegexOptions.IgnoreCase, "en-US")]
[GeneratedRegex(@"(?:^|\s)\=(?<width>\d+%?)(?:x(?<height>\d+%?))?$", RegexOptions.IgnoreCase, "en-US")]
public static partial Regex MatchTitleStylingInstructions();
}

Expand Down Expand Up @@ -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);
}
Expand Down
90 changes: 90 additions & 0 deletions tests/Elastic.Markdown.Tests/Inline/InlineImageTest.cs
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,93 @@ public void GeneratesAttributesInHtml() =>
"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" /></p>"""
);
}

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

[Fact]
public void GeneratesAttributesInHtml() =>
// language=html
Html.ShouldContainHtml(
"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="50%" height="50%" /></p>"""
);
}

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

[Fact]
public void GeneratesAttributesInHtml() =>
// language=html
Html.ShouldContainHtml(
"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="50%" height="50%" /></p>"""
);
}

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

[Fact]
public void GeneratesAttributesInHtml() =>
// language=html
Html.ShouldContainHtml(
"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="250px" height="330px" /></p>"""
);
}

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

[Fact]
public void GeneratesAttributesInHtml() =>
// language=html
Html.ShouldContainHtml(
"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" title="My Title" width="50%" height="50%" /></p>"""
);
}

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

[Fact]
public void GeneratesAttributesInHtml() =>
// language=html
Html.ShouldContainHtml(
"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="250px" height="250px" /></p>"""
);
}
Loading