Embedding Guide

George He edited this page Dec 13, 2017 · 9 revisions

List of Query Elements

  • id (gist ID) to load a gist ID
  • line (line number) to jump to a line
  • verticalRatio (0 to 100) [Embed only]
  • horizontalRatio(0 to 100) [Embed only]
  • run (run = true) to autorun [Embed only]
  • strong (strong = false) to disable strong mode (enabled by default)

Embedded views exported in strong mode will land in the main dartpad web client with strong mode enabled.

So, you want to embed a code snippet into your website? No worries, it's simple!

DartPad offers 3 different embedding choices for shared code. You have the option to show:

  1. Dart, Console, and Documentation [embed-dart]
  2. Dart, Console, and Html Output (with options to modify HTML/CSS) [embed-html]
  3. Dart and Console (Minimal) [embed-inline]

DartPad pages use query parameters in the URL to retrieve & show certain information. This means that users can configure how to show their code by quickly changing the URL.

A sample URL would be https://dartpad.dartlang.org/embed-html.html?id=72d83fe97bfc8e735607&verticalRatio=80

It can be embedded by inserting the following code into a html document:

<iframe src="https://dartpad.dartlang.org/embed-html.html?id=72d83fe97bfc8e735607&verticalRatio=80></iframe>

Specify the width and the height as style parameters of the iframe:

<iframe style="width:400px;height:400px;" src="https://dartpad.dartlang.org/embed-html.html&id=72d83fe97bfc8e735607&verticalRatio=80></iframe>

In this URL, we have the query ending ?id=72d83fe97bfc8e735607&verticalRatio=80 added path. This means that our servers will show a gist with the hashed ID 72d83fe97bfc8e735607 Found at https://gist.github.com/devoncarew/72d83fe97bfc8e735607, and vertical splitters with ratios of 80%:20%.

To add multiple queries, simply separate them by the "&" (ampersand) symbol.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.