jsfiddle generally used for sharing, saving, and embedding HTML, CSS, and JavaScript snippets.
jsfiddle allows us to add code snippets within the web pages and you can customize the look and feel of the code snippet like – changing the visual theme, font color, code background, menu background.
jsfiddle shows JavaScript, HTML, CSS, and Result tabs by default. You can remove some of its tabs if their no use of it by check and uncheck the checkbox follow by the tab name.
For example, if you are making a code snippet in which you have only used the HTML and CSS section and not done any JavaScript work, in that case, there is no need to display the JavaScript tab on your web page.
Embedding steps –
- Navigate to jsfiddle.net and create your code snippet.
- Navigate to the Menu and click on Embed
Here, multiple options are available which allows us to customize the look and feel.
It contains 3 sections –
- Tabs,
- Visual, and
- Embed Code
- and on the right side, there is a preview section.
TABS
It contains all available tabs names (JavaScript, HTML, CSS, and Result) with the checkbox. By default, all tabs are being checked and for removing the tab just unchecked the checkbox. After unchecking you will see the preview on the right side.
VISUAL
- By default Light, visual theme is being set but we can change to Dark.
It allows us to set –
- Color of Font,
- Color of Accent color,
- Code background, and
- Menu background
EMBED CODE
It contains embedding code in two forms Script and iframe. Copy iframe code and use it on your web page.
Here, is an example of embedding –
