TABLE OF CONTENTS
- Before we begin
- How to use code from Codepen.io
- Step 1. Check if code has preprocessors
- Step 2. Convert the code
- Step 3. Paste code to the Code design element
- Step 4. Enable Sandbox mode
- Step 5. Update Code design element
- Example result
Before we begin
- 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
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.
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
If your snippet has any preprocessors, you need to convert the code to HTML/CSS/JS.
You will see green Compiled sign, after you are done:
Repeat the same for all the code languages with preprocessors.
Step 3. Paste code to the Code design element
Add ShortPoint Code design element to your page.
Step 4. Enable Sandbox mode
Enable Sandbox mode toggle:
Step 5. Update Code design element
Preview your result:
Click Insert/Update button and save the page.
That's it. Now you know how to use code snippets from Codepen.io on your sites with ShortPoint Code Design Element. Enjoy!