To embed a code block into the article you have to do the following steps:
Navigate to your Contentful space content tab.
Navigate to the article you want to embed a code block in.
Find a RichText editor with your article body content.
In the right top corner of that field click + Embed and select Entry from the menu.
In the right top corner of the modal click Create new entry and select Code block content type from the menu.
Fill in the name and code fields, optionally you can specify the code language. Click Publish.
Return back to the article editor and publish your changes.
Check the article page, the code should appear there 🎉
Embed code block example:
function HelloCodeBlockExample(props) {return <h1>Hello, {props.name}</h1>;}
Keep in mind:
You can configure the syntax highlighting by changing the field language in the code block entry editor.
It is possible to embed the same code block multiple times throughout different articles.
To use inline code you don’t have to create a separate code block entry. You can just use the built-in functionality of the RichText editor, which is used for editing article body content. Here is the example of the inline code example:
console.log('inline code example')