Custom HTML block allows you to add anything on the web to your documentation pages.
To create a Custom HTML block:
Injection Warning
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 Custom HTML?
With Custom HTML, there are two modes available:
When the HTML is simple, it is rendered in the page directly (body), without an iFrame, example HTML code:
<span>This is simple HTML</span>
<select style="background: red">
<option value="0">0</option>
<option value="0">1</option>
</select>
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 Custom HTML
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:
<style type="text/css">
.example-css {
color: blue;
}
</style>
<div class="example-css">
This is HTML that will get encapsulated in an iFrame
<button onclick="submit()"></button>
</div>
<script>
function submit() {
console.log("Script tags cause HTML to get encapsulated in an iFrame");
}
</script>
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.
Resizing Dynamic iFrames
If your Custom HTML 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:
window.postMessage('resize', '*');
Use this function whenever you add elements to body dynamically.
Custom HTML Examples
Here are our top examples:
Generate this button by:
<a href="https://docs.developerhub.io/?goto=wide" target="_blank" style="background-color: #333; color: white; padding: 12px; border-radius: 3px; text-decoration: none !important">
See Wide Layout
</a>
Postman Collection Button
Generate a postman collection button by:
<a href="https://www.postman.com/run-collection/:collection_id">
<img src="https://run.pstmn.io/button.svg" alt="Run in Postman">
</a>
Column Layout
Welcome to our Supercharged documentation which has been written using DeveloperHub.io. This is a column layout.
Generate this column layout by:
<div class="container-fluid">
<div class="row">
<div class="col pl-0 text-left">
Welcome to our Supercharged documentation which has been written using DeveloperHub.io. This is a column layout.
</div>
<div class="col pr-0">
<img style ="max-width: 300px" src="https://res.cloudinary.com/developerhub/image/upload/v1534308910/1/bqimpvojsumftqf8hl7p.png"/>
</div>
</div>
</div>
Grid Layout
Generated this grid layout by:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: auto; gap: 14px;">
<a href="https://docs.developerhub.io/support-center/code-blocks">
<div style="max-width: 100%; height: 200px; background: #248FB2"></div>
</a>
<a href="https://docs.developerhub.io/support-center/images">
<div style="max-width: 100%; height: 200px; background: #27AE44"></div>
</a>
<a href="https://docs.developerhub.io/support-center/tables">
<div style="max-width: 100%; height: 200px; background: #EFAC4E"></div>
</a>
<a href="https://docs.developerhub.io/support-center/callouts">
<div style="max-width: 100%; height: 200px; background: #d9524f"></div>
</a>
</div>
GitHub Gist
Generated this Gist by:
<script src="https://gist.github.com/pkuczynski/7821992.js"></script>
PDF Reader
Generate this PDF Reader by:
<div style="text-align: center"><iframe src="https://drive.google.com/viewerng/viewer?url=https://s3-eu-west-1.amazonaws.com/dh-misc-z/test-pdf.pdf&embedded=true" width="80%" height="390" style="border: none; left: calc(100%-150px);"></iframe></div>
Flowcharts and Diagrams
Generate this Flowchart by exporting from draw.io in HTML format.
Google Maps
Generated this map by using embedgooglemap.net.
Made in DeveloperHub
