jsFiddle Snippets Embedding to your Web Page

jsfiddle generally used for sharing, saving and embedding HTML, CSS, and JavaScript snippets.

jsfiddle allows us to add code snippet within our web pages and we can able to customize look and feel of code snippet like changing the visual theme, font color, code background, menu background.

jsfiddle will show JavaScript, HTML, CSS and Result tabs by default we can some of its tab if their no use of it by check and uncheck the checkbox follow with tab name. For example, if you are making code snippet in which we have only used HTML and CSS section and not done any JavaScript work, in that case, there is no need of display JavaScript tab with your web page.

Embedding steps –

  •  First, go to the jsfiddle.net and create your code snippet.
  •  Navigate to the Menu and click on Embed

jsFiddle Snippets Embedding to your Web Page

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 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

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *