Made in DeveloperHub
HTML block allows you to add anything on the web to your documentation pages.
To create a HTML block:
Type / on a new line or click on the on the left of any line.
Select HTML
Type the HTML. See How to use HTML Block?
Click on Apply, or press ⌘ / ⌃ + ↵.
Inside the HTML editor, Tab and ⇧ + Tab indent and outdent the current line so you can keep your markup tidy.
Never inject code that you did not inspect yourself.
What's Included?
We already have Bootstrap 4.1 and FontAwesome 5 Free loaded which you can use.
How to use HTML Block?
With HTML block, there are two modes available:
When the HTML is simple, it is rendered in the page directly (body), without an iFrame, example HTML code:
For this mode, you can use inline styling. You should not add any <body> or <html> tags as the content is already rendered inside a <body> tag. If you wish to style the elements, then you can use Custom CSS to create new classes which you can apply to the elements here.
iFrame in HTML Block
For security, when the HTML includes scripts or styles, it is rendered in an iFrame inside the page. For example, such code would be rendered inside an iFrame:
When using an iFrame, no pre-existing CSS would load, including CSS from Custom CSS or any third party library. Apply your own CSS rules.
Simple HTML that renders directly in the page shares your docs' Content Security Policy. If you serve your docs with a strict CSP, make sure it allows the sources your embed loads from (scripts, styles, fonts or frames), otherwise the browser will block them.
Resizing Dynamic iFrames
If your HTML block is getting embedded in an iFrame, and the iFrame dynamically adds elements to the body which causes the height to be limited and the scrollbars to show, then you can instruct the iFrame to resize by using:
Use this function whenever you add elements to body dynamically.
Custom HTML Examples
Here are our top examples:
Fancy Button
Generate this button by:
Postman Collection Button
Generate a postman collection button by:
Column Layout
Generate this column layout by:
Grid Layout
Generated this grid layout by:
GitHub Gist
Generated this Gist by:
PDF Reader
Generate this PDF Reader by:
Flowcharts and Diagrams
Generate this Flowchart by exporting from draw.io in HTML format.
Google Maps
Generated this map by using embedgooglemap.net.