Als je regelmatig technische artikelen of blogs schrijft, is het ongetwijfeld vaak voorgekomen dat je programmacode in de pagina wilt tonen. Dit kan natuurlijk van alle zijn. HTML, JavaScript, C++, Python en zo verder.
Om er voor te zorgen dat de lezer je broncode zo makkelijk mogelijk kan begrijpen, heb ik drie manieren op een rijtje gezet. Ze hebben allemaal hun eigen voor- en nadelen. Er is niet één ‘beste’ manier om het te doen, denk ik.
1. Copy/Paste
De eenvoudigste manier is natuurlijk om rechtstreeks vanuit je editor te kopiëren-en-plakken. Dit is snel, eenvoudig en zorgt meestal voor een goed resultaat. Nadeel kan zijn dat de opmaak verloren gaat, dat regelovergangen niet goed overkomen en dat speciale tekens mogelijk automatisch worden omgezet door je editor (berucht voorbeeld: het HTML-commentaar <!—en --> wordt door veel editor automatisch omgezet naar een lang liggend streepje – of een pijl).
Een eenvoudige React-component ziet er dan bijvoorbeeld als volgt uit:
// App.js
import React from 'react';
// Child components
import Counter from "./Counter/Counter";
import DisplayCounter from "./DisplayCounter/DisplayCounter";
// Our parent component - it holds the state for the child components
function App() {
const [counter, setCounter] = React.useState(0);
const incrementCounter = (val) => setCounter(counter + val);
return (
<div className="container">
<h2>Hello React</h2>
{/*We are now passing the value and functionality for*/}
{/*the counter down to child components. */}
<Counter increment={incrementCounter} val={30} />
<DisplayCounter counter={counter}/>
</div>
);
}
export default App;
Door het lettertype aan te passen naar Courier of een ander monospaced font kun je wat betere resultaten bereiken:
// App.js
import React from 'react';
// Child components
import Counter from "./Counter/Counter";
import DisplayCounter from "./DisplayCounter/DisplayCounter";
// Our parent component - it holds the state for the child components
function App() {
const [counter, setCounter] = React.useState(0);
const incrementCounter = (val) => setCounter(counter + val);
return (
<div className="container">
<h2>Hello React</h2>
{/*We are now passing the value and functionality for*/}
{/*the counter down to child components. */}
<Counter increment={incrementCounter} val={30} />
<DisplayCounter counter={counter}/>
</div>
);
}
export default App;
2. Github Gists
Bij Github kun je veel meer hosten dan alleen complete repositories. Je kunt ook individuele snippets broncode plaatsen en hier bijvoorbeeld commentaar op vragen. Een geïsoleerd stuk code zonder omliggende structuur of project heet een gist.
En het mooie is: van Github krijg je een embed-code die je in je webpagina of blog kunt plakken. Dezelfde React-component ziet er dan opeens als volgt uit:
Het werken met Gists is superpraktisch als je broncode wilt delen, de lezer de mogelijkheid wilt geven de code eenvoudig te kopiëren, commentaar wilt verzamelen op je gist (via Github) en meer. Het is echt een sociale manier om met code om te gaan.
In populaire editors kun je van broncode rechtstreeks een gist maken:
Webstorm
- Selecteer een stuk code, klik met de rechtermuisknop en kies Create Gist.
Visual Studio Code
Installeer de extension Gist van Ken Howard (https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist). Voordat je de extensie kunt gebruiken, moet je wel eerst zelf een Github Access Token voor Gists aanmaken. Hoe dat gaat, lees je hier: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token.
Daarna kun je via Ctrl+Shift+P, Create New Gist een nieuwe gist maken.
3. Carbon
Tot slot kun je een mooie afbeelding van je broncode laten maken via de online dienst Carbon (https://carbon.now.sh/).
Hier kun je je broncode kopieren/plakken en er een .png- of .svg-afbeelding van laten maken. Je hebt keuze uit tal van kleurenschema’s, achtergrondkleur en taalschema’s (HTML, JavaScript, CSS, C#, JSX en talloze andere).
Onze React-component ziet er dan op deze manier uit:
Conclusie
Je hebt drie manieren gezien om broncode te delen via je webpagina. De eenvoudigste manier is het rechtstreeks kopiëren/plakken vanuit je editor. Als je de broncode via een online platform wilt delen, is Github Gists een goede manier. Wil je een fraaie screenshot van je code distribueren (zonder dat deze rechtstreeks te kopieren is), gebruik dan de online dienst Carbon.
Ken jij nog andere alternatieven? Laat het weten. Ik ben benieuwd naar de manier waarop jij broncode deelt via je blog of website.
Peter Kassenaar
-- 8 juli 2020