One moment, we're cooking some code examples
Learn the Code examples and how to use them
We use the code previewer to show the code and item in an easy way so it is easy to understand and you see the whole item in one go. This way you can see how and why some things are made with the code.
We have a basic code previewer, and for some pages we have a slightly different version. But don't worry you can change it with only adding a class.
The basic code previewer contains two sections, the top section is the preview, and this section is for showing the item it is clear and easy to see. the bottom section is for all the code that is used to make the item that is in the preview section.
If you want to add more types of code or preview two or more items, you can add an extra preview or textarea bij using the grid inside of the code previewer.
Area for the showcase item
The code blocks supports a lot of different code. all you have to do is change the name of the type of code you are using in <textarea class="Code HTML"> and when you change the code the icon changes automatically.
here is a list of all the code that is supported:
To see the code better you can click on the icon in the top-right corner, and it wil open the code in full screen.
Area for the showcase item
for the preview you can have different item like: images, text, tables. But not every item wil fit great. So there are different types of classes for the preview, to make the item come out better in the preview.
for now we have the classes:
The class Inline wil make it so that the whole preview becomes inline. essentially the preview wil become smaller. you place it next to the PreviewContainer
Area for the showcase item
The class Featured wil make it so that the background op the preview becomes light gray. this will make the item separate better from the background.
Area for the showcase item
With this class you can make the preview resizable which is special and extremely super handy if you want to see & test the responsive characteristics of the items in the previewer.
you can change the width of the previewer by grabbing the right side of the preview and drag it. while dragging the preview wil show you in which size you are.
Area for the showcase item
With this class you can make the items inside preview Vertical which is handy if you want to show the content in a different way. what you need to do as you can see in the exaple is adding an row and col to create two colloms. on top of this we added a FlexColumnWrapper and a FlexColumn to make them the same height.
To make the CodeBlock show fully you can add the class Unwrapped this is needed because the system wil check this and if it does not have the claas it will add the class and there for wrap the CodeBlock.
Area
for
the
showcase
item
This is a secluded CodeBlock, this can be used if you only want to show the code and not a preview. for example when you are explaining back-end where you don't have to show it visually.