The Custom HTML block enables you to seamlessly incorporate any web content directly into your documentation pages. This flexibility allows you to enhance your documentation with diverse elements, making it more engaging and informative for your audience.
To create a Custom HTML block:-
- Type
/
- Select Custom HTML
- Type the HTML. See How to use Custom HTML?
- Click on Apply.
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 content is straightforward, it is rendered directly within the page's body, eliminating the need for an iFrame. Below is an example of simple 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 utilize inline styling effectively. Please refrain from adding any <body> or <html> tags, as the content is already rendered within a <body> tag. If you would like to style the elements, you can use Custom CSS to create new classes that can be applied to the elements in this section.
iFrame in Custom HTML
For enhanced security, any HTML that contains scripts, styles, head tags, or additional iFrames will be rendered within an iFrame embedded in the page. This ensures that potentially harmful content is isolated and does not interfere with the main page. For instance, the following code would be rendered within 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, it is important to note that no pre-existing CSS will load. This includes styles from Custom CSS or any third-party libraries. Therefore, you'll need to apply your own CSS rules to ensure your iFrame content appears as desired.
Resizing Dynamic iFrames
If your Custom HTML is being embedded within an iFrame, and the iFrame dynamically adds elements to the body, this can lead to limitations in height and the appearance of scrollbars. To resolve this issue, 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:
Fancy Button
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
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.