codepen.pug – Modern pens

View source code on Github

---

Embed pens

mixin codepen(id, user)
  - if ("default_tab" in attributes)
    - default_tab = attributes.default_tab;
    - delete attributes.default_tab;
  - else
    - default_tab = "result";
  - if ("embed_version" in attributes)
    - embed_version = attributes.embed_version;
    - delete attributes.embed_version;
  - else
    - embed_version = 2;
  - src = `http://codepen.io/${user}/embed/${id}/?default-tab=${default_tab}&embed-version=${embed_version}`
  - if ("theme_id" in attributes)
    - theme_id = attributes.theme_id;
    - delete attributes.theme_id;
    - src = src + `&theme-id=${theme_id}`
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(scrolling="no"
         frameborder="0"
         allowtransparency="true"
         allowfullscreen="true"
         src=`${src}`
         width="100%"
         height="300")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+codepen(id, user)(default_tab="result", embed_version=2, theme_id=null, width="100%", height="400")

Embed a pen from Codepen passing a pen identificator and their user.

Note

You can obtain identificator and user of a pen from the url of their page. For example: https://codepen.io/user/pen/id.

Arguments:

• id (string) – Pen id.
• user (string) – Pen user.
• default_tab (string, optional) – Tab shown after the pen is loaded. As default "result".
• embed_version (integer, string, optional) – Codepen embed API version used for current insertion. As default 2.
• theme_id (integer, string, optional) – Identificator of your customized theme. You can create your own theme from Codepen Embed Theme Builder.

Usage

Input

+codepen("ZameGP", "mondeja")(theme_id=33136)

Output

<iframe src="http://codepen.io/mondeja/embed/ZameGP/?default-tab=result&embed-version=2&theme-id=33136" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" width="100%" height="300"></iframe>

Render