I wonder if there is any way to to insert a enlarged figure with scroll bar #6313

UniverGao · 2023-11-08T07:58:27Z

UniverGao
Nov 8, 2023

I tried to use insert html and css code in *.md file like below:

<head>
    <style>
    .image-container {  
        width: 500px;
        height: 500px;
        overflow: scroll;  
    }
    </style>
</head>
# title
and some text
then insert a figure:

<div class="image-container" markdown>

![](../ref-fig/power-state-manager/state-off.svg){ : style="height:1500px;max-width:5000px;" }

</div>

It could work in my vscode preview window, but witch could not in this theme preview in web (with Chrome). I wonder if there is a sulution? thx

alexvoss · 2023-11-08T08:55:15Z

alexvoss
Nov 8, 2023
Collaborator Sponsor

There is a solution. If all you want to do it to include extra CSS, you can do this inside your mkdocs.yml using the extra_css configuration. Then, create classes as needed for the content you want to style. Use attribute lists if you need to attach classes to Markdown content (so no raw HTML wrappers are needed).

If you want to include the extra CSS only in specific pages then you can create a custom page template, see the customizing your theme section of the MkDocs documentation. I would advise against this approach, though, since page templates can change and you end up having a maintenance issue if the template you modified is changed in subsequent versions of Material for MkDocs.

0 replies

kamilkrzyskow · 2023-12-09T05:51:40Z

kamilkrzyskow
Dec 9, 2023
Collaborator

Any progress @UniverGao?
Like Alex said, using an extra css file is the right solution if you want to define a styling rule for the whole website.
However, using the <style> HTML tag for a single page is fine imo, but the additional <head> isn't, as there should be only one on the page, and it's already provided by the theme template.
As you're using Markdown inside HTML, make sure you enable the md_in_html extension. Having said that, I'm not sure if attribute lists would work when wrapped by HTML.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

I wonder if there is any way to to insert a enlarged figure with scroll bar #6313

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

I wonder if there is any way to to insert a enlarged figure with scroll bar #6313

Uh oh!

Uh oh!

UniverGao Nov 8, 2023

Replies: 2 comments

Uh oh!

alexvoss Nov 8, 2023 Collaborator Sponsor

Uh oh!

kamilkrzyskow Dec 9, 2023 Collaborator

UniverGao
Nov 8, 2023

alexvoss
Nov 8, 2023
Collaborator Sponsor

kamilkrzyskow
Dec 9, 2023
Collaborator