With ShortPoint Code Design Element you can copy the embed codes from the other sites to inject HTML, CSS or JavaScript to your pages.

Codepen.io offers plenty of code snippets that you can easily use on your pages with the help of Code Design Element.

For example, you can have the following animation on your page:

Sometimes on codepen.io you may find code snippets that do not work as intended on your page. It happens when preprocessors - code languages that will be complied to HTML, CSS or JavaScript - are used in the code snippets.

In this tutorial we will explain how to properly use code from Codepen.io in our ShortPoint Code Design Element: with and/or without preprocessors. See the steps below.

TABLE OF CONTENTS

Before we begin
Prerequisites
How to use code from Codepen.io
Example result

Before we begin

To learn how to use Code, please check this article: Introducing Code Design Element.
The Code Design Element is available since the ShortPoint SPFx version 6.9.35.x. Click here to check and download the latest available version of ShortPoint.

Prerequisites

You have code snippet from Codepen.io you would like to use on your page(s).
You have ShortPoint SPFx version 6.9.35.x or higher.

How to use code from Codepen.io

In this example we will use the following code snippet from codepen.io: https://codepen.io/amitsheen/pen/WNweryv.

Feel free to check the snippets library and find the snippet to your preference.

Step 1. Check if code has preprocessors

Preprocessor(s) used in the snippet

You can see that the snippet uses preprocessors if it is added in the parenthesis to the relevant code language. For example, our snippet uses SCSS preprocessor for CSS.

Also, you can click the cog wheel icon near the code language to show the Pen Settings and in the pop up window it will show you the chosen preprocessor:

Next: If your code snippet has at least one preprocessor, continue to Step 2 of this article.

Preprocessor(s) not used in the snippet

If there are no preprocessors used, you will only see HTML, CSS and JS without any information in the parenthesis:

If you open Pen Settings, you will see None chosen in the preprocessor field:

Next: If your code snippet only consists of HTML, CSS, JS, continue to Step 3 of this article.

External scripts/stylesheets resources

External scripts

ShortPoint Code Design Element does not support adding external script resources. If your snippet has external resources it will not work. To check if there are any external scrips, open Pen Settings and check if there are any links in the Add External Scripts/Pens fields.

External stylesheets

You can use external stylesheets (for CSS) in ShortPoint Code Element.

Add them at the top of the CSS area using the following string (1), replacing link/to/external/stylesheet.css with the stylesheet link (2):

@import url (link/to/external/stylesheet.css);

Step 2. Convert the code

As mentioned at the beginning, it is only possible to use HTML, CSS and JavaScript code languages for Code Design Element.

If your snippet has any preprocessors, you need to convert the code to HTML/CSS/JS.

Click the down arrow icon near the code language with preprocessor (1) and choose View Compiled CSS (HTML/JavaScript) from the drop down (2):