How to embed code for tutorial website?

Design help Custom code
1

Hello Webflow Community,

I intend to use Webflow to host dedicated Tutorials, Blog posts and FAQ’s all around the development of new IoT applications. As such, I need to be able to embed code, in order to explain parts of the application and make this easy to understand and to follow for people. I am currently using a slightly modified version of: Helpdesk - Documentation HTML5 Responsive Website Template

What I need

In the editor, I need to be able to easily embed code snippets into “articles” (e.g., this is what an article looks like: How to withdraw money from your account). When it comes to the code snippets, there are two ways to approach this:

Option 1: Without Code highlighting

This would simply mean that the code snippet in question, is going to be “marked” in some way or another and that the code can be easily copy / pasted. What is important here is that the formatting of the code block (especially tabs / whitespace) is still present. Here is an example on how it’s done in Markdown:

1824×790 82.4 KB

Option 2:

We simply embed the Github code itself, as such the syntax will also be highlighted. Here is how it looks like on Medium.com:

1584×478 47.7 KB

Can anyone here help me to enable one of these options?

Thank you!

1 Like
2

If you want to go option 1, just style a paragraph/div with a monospace font like this https://webflow.com/website/webflow-tricks

3

what about code block formatting? i.e. tabs / whitespace? Currently the editor automatically removes it.

1 Like
4

Essentially, I want to achieve the same thing as here: How to Caption a Lightbox with Video

Could you tell me how you did this? I suppose this will work in the editor then as well? Thanks a lot!

5

You should be able to view the shared project in the designer. There’s nothing special about it.

6

This is not part of the editor, it’s simply a separate page. I need to have this as part of the actual editor, i.e.

7

Not sure if it’ll achieve exactly what you want, but you can embed codepens in rich text fields from the URL:

1180×1104 104 KB

1 Like
8

Can we enable github gist’s to be embedded please? I don’t know what else I could do. This is literally the most important feature that I need (what is the point of a tutorial site if you have no code to display).

2 Likes
9

Is there any way to make http://embed.ly/ work with Webflow?

10

Webflow already uses embed.ly for certain components.

You need custom code to embed code from gist and place it in a <pre></pre> tag.

http://sandbox-903b9c.webflow.io/gistgithub-embed-test

Embedding this gist Country list as JavaScript array (alphabetical) · GitHub

Custom code needed will be something like this:

<script>
$.ajax({
  url: 'https://cdn.rawgit.com/samliew/4f6aec0c65e4dbe5c7fd782ea0953a3b/raw/0d928b52b69aef81b1bf5da50cbfb26ba3b4e71e/countries.js',
  dataType: 'text',
  success: function(data, textStatus, jqxhr) {
    $('<pre></pre>').text(data).appendTo('body');
  },
});
</script>

Can easily wrap in a reusable function to simply it further.

However, if you need to embed within a rich text editor, have to use JS to find and replace all special paragraphs like these in the richtext element with the gist code wrapped in a pre tag

<p>CODE:https://cdn.rawgit.com/samliew/4f6aec0c65e4dbe5c7fd782ea0953a3b/raw/0d928b52b69aef81b1bf5da50cbfb26ba3b4e71e/countries.js</p>

replaced with

<pre>
code here
</pre>

If you need such functionality, I am available here for consultation.

11

Is there any way to enable Markdown instead of the current editor, which is really very limited.

12

Can anyone here help me and find a solution to my problem? I really need code block highlighting, else this entire website is pretty much pointless. I am more than happy to pay the person that can come up with a solution.

13

Does this suit your needs? GitHub - showdownjs/showdown: A bidirectional Markdown to HTML to Markdown converter written in Javascript

14

That sounds like a good solution. How do I now embed this into my project so that I can write markdown in the editor?

1 Like
15

This would take quite a bit of custom coding, if you need assistance with this you can request a developer in the Freelance category, or you can hire me direct at http://webflowexpert.com

16

This topic was automatically closed after 60 days. New replies are no longer allowed.