Demo
Afspraak
Menu
Demo
Afspraak

Seefore Nieuws en Blog

How-to: implementeer code snippets in HubSpot Blog en Website

Ruben ten Brinke, op 5-jul-2019 9:55:00

In dit knowledge base artikel wordt uitgelegd hoe je embedded code of code snippets op een goede manier kan toevoegen aan jouw HubSpot Blog en Website. In deze how-to wordt gebruik gemaakt van highlight.js. HubSpot biedt de mogelijkheid om deze functionaliteit toe te voegen. Hoe dat precies werkt lees je hieronder. Op het moment dat je code snippets wilt toevoegen aan een blog of pagina op HubSpot kom je erachter dat dit uiteindelijk wordt weergegeven als 'gewone tekst'. Om er voor te zorgen dat je code snippets er ook daadwerkelijk uit komen te zien als blokken code - welke gecopy-pastet kunnen worden - zijn er een aantal mogelijkheden.

In deze how-to beschrijven we een stappenplan voor het gebruik van Highlight.js. Highlight.js is een Javascript-bibliotheek die code op een pagina herkent, het op een dusdanige manier formatteert en het zo weergeeft dat het goed leesbaar is.

How to - embed code on HubSpot blog

In dit artikel zal worden uitgelegd hoe je code snippets met behulp van Highlight.js inricht voor op HubSpot gehoste content.

1. Template in Design Manager

De eerste stap bestaat uit het toevoegen van de juiste stylesheet van Highlight.js aan het template van je blog of website pagina. Zoals je in de bovenstaande image kan zien heeft Highlight.js veel verschillende soorten zogenoemde 'styles'. In dit voorbeeld maken we gebruiken van de 'vs2015' style.

Om de stylesheet van deze stijl te genereren, volg je de volgende stappen:

  • In deze Highlight.js (klik op de link) demo omgeving klik je de 'vs2015' stijl aan; 
  • Rechtermuisklik op de pagina en klik op inspect;
stylesheet vs2015
  • Aan de rechterkant zie je een CSS-bestand met de naam 'vs2015', klik daar op;
stylesheet vs2015 css
  • Klik onder de CSS en zorg dat je alles copy-paste;
  • Ga vervolgens naar de HubSpot Design Manager;
  • Rechtermuisklik om een nieuwe file te openen;

New file HubSpot

  • Kies voor de optie 'CSS Stylesheet' en geef deze een naam;
  • De vooraf ingevulde code kun je verwijderen. Hier plak je de 'vs2015' code in die je zojuist hebt gekopieerd en klik op publish changes;
  • Keer terug naar je template. Nu kun je bij 'Linked Stylesheets' aan de rechterkant van je beeldscherm eenvoudig de vs2015 stylesheet  toevoegen;

Add stylesheet

  • Tot slot, voeg het volgende script toe in de Additional <head> markup sectie van het template (ja, je kan het resultaat nu al zien). Deze bevindt zich onder de sectie waar je zojuist de stylesheet hebt toegevoegd.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
	

Hiermee zorg je ervoor dat het highlight.js script wordt geladen en dat de juiste library van highlight.js wordt geïnitialiseerd. Dat betekent dat het script op zoek gaat naar code op een pagina en het op de juiste manier styled.

2. Toevoegen van code snippets 

Om de code toe te voegen aan je pagina of blog zijn er een aantal stappen die je moet volgen.

  • Als je in de 'Edit' modus zit van jouw pagina of blog, klik je bovenaan in de balk op advanced en dan op source code;
  • Zoek - eventueel met Ctrl- of Cmd F - naar de plek waar je de code snippet wil toevoegen;
  • Maak voor elk stuk code, of het nou HTML, JavaScript of PHP is, gebruik van een open en closed 'pre' en 'code' tag: <pre><code>...</pre></code>. Zie het voorbeeld hieronder;

pre en code tag toevoegen

  • Voeg de code toe tussen de opening- en closing 'code' tag zoals in bovenstaande afbeelding;

Maak je gebruik van HTML, dan zul je eerst de html code via een encoder/decoder moeten encoden zodat het zichtbaar wordt als je het toevoegt in de source code. Gebruik daar de volgende website voor: https://mothereff.in/html-entities

  • Klik rechtsboven op Save en open via het oog icoontje aan de linkerkant de preview (in een nieuw tabblad);
  • Ben je tevreden met wat je ziet? Publiceer je pagina en je bent klaar!

Vragen?

Heb je naar aanleiding van deze how-to nog vragen of wil je een moment inplannen om samen het toevoegen van code snippets in jouw HubSpot omgeving door te nemen? Neem dan contact op met Ruben via onze support pagina. 

Onderwerpen:Knowledge base

Niks meer missen?

Schrijf je in voor de Seefore blog updates en ontvang de nieuwste HubSpot updates en ontwikkelingen in je inbox.

Aanmelden blog