you can use this iframe code `:+1:`
```html fold
<iframe
src="https://gist.github.com/milanaryale/9d558eae37b0aba9faeb4cbf061e970.pibb"
style="width: 100%; height: 300px; border: 0;"
>
</iframe>
```
%% <iframe
src="https://gist.github.com/milanaryal/e9d558eae37b0aba9faeb4cbf061e970.pibb"
style="width: 100%; height: 173px; border: 0;"
>
</iframe> %%
but the bad thing about this is that the height is fixed. A better way to show on obsidian is using the [obsidian gist plugin](https://github.com/linjunpop/obsidian-gist).
## Obsidian Gist
```gist
8861576f9a8e1471623d7e204bb9956b
```
## Gist-embed
<code data-gist-id="8861576f9a8e1471623d7e204bb9956b"></code>
### Add Script Tag
```html
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/gist-embed.min.js"
></script>
```
### Add Code Element to Your Webpage with Data-gist-id Attribute
```html
<code data-gist-id="5457595"></code>
```
### Global Settings and Init
- You can add an object with settings to `window.GistEmbedSettings` before you include the gist-embed script tag
- Settings supported:
- `baseURL`: Specify a base url used to fetch the gist. Defaults to `https://gist.github.com`.
- You can run the init to parse the elements at any time. This is useful when your code element is added after the script tag include has already parsed the elements on page load.
- `window.GistEmbed.init()`: This will parse all the elements again that have a `data-gist-id` attribute.
### Modifiers
You can add attributes to your HTML Element that modify the gist embed.
- `data-gist-hide-line-numbers`
- **type**: string `('true')`
- Removes all of the line numbers in the left hand gutter of the gist
- `data-gist-hide-footer`
- **type**: string `('true')`
- Removes the gist footer
- `data-gist-caption`
- **type**: string
- Places a header above the gist with your chosen caption string
- `data-gist-file`
- **type**: string
- If the gist has multiple files, specify the filename you want to show
- `data-gist-line`
- **type**: string
- Line numbers you want to show. The rest are removed.
- Examples:
- `1,2,3` // Only shows lines 1, 2 and 3
- `1-4` // Only shows lines 1, 2, 3, and 4
- `1-4,8` // Only shows lines 1, 2, 3, 4, and 8
- `1-` // Shows lines 1 to the end
- `data-gist-highlight-line`
- **type**: string
- Line numbers you want to highlight. Uses the same syntax for line ranges as `data-gist-line`
%% you will need to use this with the max-content class and some javascript %%