Code Blocks in NoNex In Notion, code blocks are used to share and display code snippets in an organized and readable format. With NoNex, we ensure that these code blocks are rendered exactly as they appear in Notion on your website, while adding enhanced functionality such as dynamic light and dark theme support, syntax highlighting, and easy copying.
We use Prism.js for syntax highlighting, ensuring that the code is properly formatted and highlighted according to the selected programming language. The code block is rendered and formatted on the server side, which means it is static and loads faster for visitors. Additionally, NoNex supports a copy-to-clipboard feature, allowing users to easily copy the code with a single click.
For Mermaid code blocks, we use Mermaid.js to render the diagrams alongside the code. The Mermaid diagrams also change according to the website theme, with rendering happening on the client side.
Features Supported by NoNex for Code Blocks Exact Code Block Rendering: Code blocks are rendered exactly like they appear in Notion, preserving formatting and indentation.
Dynamic Light and Dark Themes: Syntax highlighting and code block appearance adapt to the light or dark theme of the website.
Syntax Highlighting with Prism: Code is automatically highlighted based on the selected programming language, improving readability.
Copy Code Functionality: Users can copy the code block to their clipboard with a simple click.
Support for Multiple Programming Languages: NoNex supports all programming languages available in Notion's code block, with appropriate highlighting.
Mermaid Diagrams Support: Mermaid code blocks are rendered side by side with the diagram, with theme-based styling.
Example of Code Block Rendering: JavaScript JavaScript
export default async function BulletedListItem ( block ) {
console. log ( block) ;
return (
< ul className = " ps-7 marker:bg-sky-400 list-disc list-outside [&_ul]:list-[circle] [&_ul_ul]:list-[square] [&_ul_ul_ul]:list-[disc] [&_ul_ul_ul_ul]:list-[circle] [&_ul_ul_ul_ul_ul]:list-[square] [&_ul_ul_ul_ul_ul_ul]:list-[disc] my-[0.0625rem] first:mt-0.5 last:mb-0 space-y-0.5" >
{ block. blocks. map ( ( block ) => {
return < ListItem block = { block} /> ;
} ) }
</ ul>
) ;
}
Assembly Assembly
export default async function BulletedListItem(block) {
console.log(block)
return (
< ul className= "ps-7 marker:bg-sky-400 list-disc list-outside [&_ul]:list-[circle] [&_ul_ul]:list-[square] [&_ul_ul_ul]:list-[disc] [&_ul_ul_ul_ul]:list-[circle] [&_ul_ul_ul_ul_ul]:list-[square] [&_ul_ul_ul_ul_ul_ul]:list-[disc] my-[0.0625rem] first:mt-0.5 last:mb-0 space-y-0.5" >
{block.blocks.map((block) = > {
return < ListItem block= {block} / >
})}
< / ul>
)
}
Elm Elm
export default async function BulletedListItem ( block ) {
console . log ( block ) ;
return (
< ul className = "ps-7 marker:bg-sky-400 list-disc list-outside [&_ul]:list-[circle] [&_ul_ul]:list-[square] [&_ul_ul_ul]:list-[disc] [&_ul_ul_ul_ul]:list-[circle] [&_ul_ul_ul_ul_ul]:list-[square] [&_ul_ul_ul_ul_ul_ul]:list-[disc] my-[0.0625rem] first:mt-0.5 last:mb-0 space-y-0.5" >
{ block . blocks . map ( ( block ) => {
return < ListItem block = { block } /> ;
} ) }
</ ul >
) ;
}
Arduino Arduino
int ledPin = 13 ;
void setup ( ) {
pinMode ( ledPin, OUTPUT ) ;
}
void loop ( ) {
digitalWrite ( ledPin, HIGH ) ;
delay ( 1000 ) ;
digitalWrite ( ledPin, LOW ) ;
delay ( 1000 ) ;
}
export default async function BulletedListItem ( block) {
console. log ( block) ;
return (
< ul className= "ps-7 marker:bg-sky-400 list-disc list-outside [&_ul]:list-[circle] [&_ul_ul]:list-[square] [&_ul_ul_ul]:list-[disc] [&_ul_ul_ul_ul]:list-[circle] [&_ul_ul_ul_ul_ul]:list-[square] [&_ul_ul_ul_ul_ul_ul]:list-[disc] my-[0.0625rem] first:mt-0.5 last:mb-0 space-y-0.5" >
{ block. blocks. map ( ( block) = > {
return < ListItem block= { block} / > ;
} ) }
< / ul>
) ;
}
Bash Bash
#!/bin/bash
SOURCE_DIR = "/path/to/source"
BACKUP_DIR = "/path/to/backup"
DATE = $( date +%Y%m%d_%H%M%S)
echo "Backing up $SOURCE_DIR to $BACKUP_DIR /backup_$DATE "
cp -r "$SOURCE_DIR " "$BACKUP_DIR /backup_$DATE "
if [ $? -eq 0 ] ; then
echo "Backup completed successfully."
else
echo "Backup failed!"
fi
BASIC BASIC
10 PRINT "Hello, World!"
20 END
BNF BNF
< expression> ::= < term> | < expression> "+" < term> | < expression> "-" < term>
< term> ::= < factor> | < term> "*" < factor> | < term> "/" < factor>
< factor> ::= < number> | "(" < expression> ")"
< number> ::= < digit> | < number> < digit>
< digit> ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
C C
# include <stdio.h>
int main ( ) {
printf ( "Hello, World!\n" ) ;
return 0 ;
}
C# C#
using System ;
class Program
{
static void Main ( string [ ] args)
{
Console. WriteLine ( "Hello, World!" ) ;
}
}
C++ C++
# include <iostream>
using namespace std;
int main ( ) {
cout << "Hello, World!" << endl;
int a = 5 , b = 10 ;
int sum = a + b;
cout << "The sum of " << a << " and " << b << " is: " << sum << endl;
for ( int i = 1 ; i <= 5 ; i++ ) {
cout << "Iteration: " << i << endl;
}
return 0 ;
}
Clojure Clojure
( ns example.core)
( defn hello-world [ ]
( println "Hello, World!" ) )
( hello-world )
CoffeeScript CoffeeScript
square = ( x) - > x * x
console. log "The square of 5 is #{square(5)} "
Coq Coq
Theorem plus_n_O : forall n : nat, n + 0 = n.
Proof .
intros n. induction n as [ | n' IH] .
- simpl. reflexivity.
- simpl. rewrite IH. reflexivity.
Qed .
CSS CSS
body {
background-color : #f0f0f0;
font-family : Arial, sans-serif;
}
h1 {
color : #333;
text-align : center;
}
Dart Dart
void main ( ) {
print ( 'Hello, World!' ) ;
int sum ( int a, int b) {
return a + b;
}
print ( 'The sum of 5 and 10 is: ${ sum ( 5 , 10 ) } ' ) ;
}
Dhall Dhall
let Person = { name : Text , age : Natural }
in { name = "Alice" , age = 30 } : Person
Diff Diff
// Example diff showing changes between two files
--- original.txt 2024-09-25 12:00:00.000000000 +0000
+++ modified.txt 2024-09-25 12:00:00.000000000 +0000
@@ -1,4 +1,4 @@
Hello, World!
- This is the original file.
+ This is the modified file.
Goodbye!
Dockerfile Plain Text
# A simple Dockerfile to set up a Node.js application
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["node", "index.js"]
EBNF EBNF
Expression = Term , { ( "+" | "-" ) , Term } ;
Term = Factor , { ( "*" | "/" ) , Factor } ;
Factor = Number | "(" , Expression , ")" ;
Number = Digit , { Digit } ;
Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" ;
Elixir Elixir
defmodule Example do
def hello_world do
IO . puts ( "Hello, World!" )
end
end
Example . hello_world ( )
Elm Elm
module Main exposing ( .. )
import Browser
import Html exposing ( text )
main =
Browser.sandbox { init = init , update = update , view = view }
type Msg = NoOp
init : ( ) -> ( )
init _ = ( )
view : ( ) -> Html.Html Msg
view _ = text "Hello, World!"
Erlang Erlang
- module ( hello ) .
- export ( [ hello_world / 0 ] ) .
hello_world ( ) - >
io : format ( "Hello, World!~n" ) .
F# F#
printfn "Hello, World!"
let sum a b = a + b
let result = sum 5 10
printfn "The sum of 5 and 10 is: %d" result
for i in 1 .. 5 do
printfn "Iteration: %d" i
Flow JavaScript
function add ( a : number, b : number) : number {
return a + b;
}
const result = add ( 5 , 10 ) ;
console. log ( result) ;
Fortran Fortran
program hello
implicit none
print * , "Hello, World!"
end program hello
Gherkin Gherkin
Feature: Hello World
Scenario: Print Hello World
Given I have a program
When I run the program
Then I should see "Hello, World!"
GLSL (OpenGL Shading Language) GLSL
# version 330 core
layout ( location = 0 ) in vec3 position;
void main ( ) {
gl_Position = vec4 ( position, 1.0 ) ;
}
Go Go
package main
import "fmt"
func main ( ) {
fmt. Println ( "Hello, World!" )
}
GraphQL GraphQL
query {
user ( id : "1" ) {
name
email
}
}
Groovy Groovy
println "Hello, World!"
def sum ( a, b) {
return a + b
}
println "The sum of 5 and 10 is: ${ sum ( 5 , 10 ) } "
Haskell Haskell
main :: IO ( )
main = putStrLn "Hello, World!"
HTML HTML
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Hello World</ title>
</ head>
< body>
< h1> Hello, World!</ h1>
</ body>
</ html>
Idris Idris
module Main
main : IO ( )
main = putStrLn "Hello, World!"
Java Java
public class HelloWorld {
public static void main ( String [ ] args) {
System . out. println ( "Hello, World!" ) ;
}
}
JavaScript JavaScript
console. log ( "Hello, World!" ) ;
function sum ( a, b ) {
return a + b;
}
console. log ( "The sum of 5 and 10 is:" , sum ( 5 , 10 ) ) ;
JSON JSON
{
"greeting" : "Hello, World!" ,
"numbers" : {
"a" : 5 ,
"b" : 10 ,
"sum" : 15
}
}
Julia Julia
println ( "Hello, World!" )
function sum( a, b)
return a + b
end
println ( "The sum of 5 and 10 is: " , sum( 5 , 10 ) )
Kotlin Kotlin
fun main ( ) {
println ( "Hello, World!" )
fun sum ( a: Int, b: Int) : Int {
return a + b
}
println ( "The sum of 5 and 10 is: ${ sum ( 5 , 10 ) } " )
}
LaTeX LaTeX
\documentclass { article }
\begin { document }
\title { Hello World}
\author { Your Name}
\date { \today }
\maketitle
Hello, World!
\end { document }
Less Less
@primary-color: #4CAF50;
body {
background-color : @primary-color ;
color : white;
font-family : Arial, sans- serif;
}
h1 {
color : darken ( @primary-color , 10%) ;
}
Lisp Lisp
( defun hello-world ( )
( format t "Hello, World!" ) )
( hello-world )
LiveScript LiveScript
console . log "Hello, World!"
sum = ( a , b ) -> a + b
console . log "The sum of 5 and 10 is: #{ sum 5 , 10 } "
LLVM IR LLVM IR
define i32 @main ( ) {
entry:
%a = alloca i32
%b = alloca i32
store i32 5 , i32 * %a
store i32 10 , i32 * %b
%a_val = load i32 , i32 * %a
%b_val = load i32 , i32 * %b
%sum = add i32 %a_val , %b_val
ret i32 %sum
}
Lua Lua
print ( "Hello, World!" )
function sum ( a, b) return a + b
end
print ( "The sum of 5 and 10 is: " .. sum ( 5 , 10 ) )
Makefile Makefile
CC = gcc
CFLAGS = -Wall
all : hello
hello : hello.o
$ ( CC) -o hello hello.o
hello.o : hello.c
$ ( CC) $ ( CFLAGS) -c hello.c
clean :
rm -f hello hello.o
Markdown Markdown
# Hello World
This is a simple Markdown document.
## Code Block
```python
print("Hello, World!")
XML XML
### Markup (XML)
```xml
<?xml version="1.0" encoding="UTF-8"?>
< greeting>
< message> Hello, World!</ message>
</ greeting>
MATLAB MATLAB
disp ( 'Hello, World!' ) ;
function result = sum ( a, b)
result = a + b;
end
result = sum ( 5 , 10 ) ;
disp ( [ 'The sum of 5 and 10 is: ' , num2str ( result) ] ) ;
Mathematica Mathematica
Print[ "Hello, World!" ] ;
sum[ a_ , b_ ] := a + b
result = sum[ 5 , 10 ] ;
Print[ "The sum of 5 and 10 is: " , result] ;
Mermaid Mermaid
graph TD;
A[Hello, World!] --> B{Sum} ;
B --> |5| C[5] ;
B --> |10| D[10] ;
C --> E[Result] ;
D --> E;
Nix Nix
{ pkgs ? import < nixpkgs> { } } :
pkgs. stdenv. mkDerivation {
pname = "hello-world" ;
version = "1.0" ;
src = null ;
buildInputs = [ pkgs. gcc ] ;
installPhase = ''
mkdir -p $out/bin
echo '#!/bin/sh' > $out/bin/hello
echo 'echo "Hello, World!"' >> $out/bin/hello
chmod +x $out/bin/hello
'' ;
}
Notion Formula Notion Formula
prop1 + prop2
2 + 5
"Monkey D." + " Luffy"
add ( 4 , 7 )
40. add ( 2 )
12 - 5
subtract ( 5 , 12 )
47. subtract ( 5 )
12 * 4
multiply ( 12 , - 4 )
21. multiply ( 2 )
1 == 1
equal ( 1 , 1 )
1. equal ( 1 )
1 == 2
"1" == 1
toNumber ( "1" ) == 1
2 ^ 2 == 4
length ( "Monkey D. Luffy" ) == 15
[ 1 , 2 ] == [ 2 , 1 ]
Objective-C Plain Text
#import <Foundation/Foundation.h>
int main(int argc, const char * argv[]) {
@autoreleasepool {
// A simple Objective-C program to print "Hello, World!"
NSLog(@"Hello, World!");
// A function to calculate the sum of two numbers
int a = 5;
int b = 10;
int sum = a + b;
NSLog(@"The sum of %d and %d is: %d", a, b, sum);
}
return 0;
}
OCaml OCaml
let ( ) =
print_endline "Hello, World!" ;
let sum a b = a + b
let ( ) =
let result = sum 5 10 in
Printf. printf "The sum of 5 and 10 is: %d\n" result;
Pascal Pascal
program HelloWorld;
begin
writeln( 'Hello, World!' ) ;
function Sum( a, b: Integer) : Integer;
begin
Sum := a + b;
end ;
writeln( 'The sum of 5 and 10 is: ' , Sum( 5 , 10 ) ) ;
end .
Perl Perl
print "Hello, World!\n" ;
sub sum {
my ( $a , $b ) = @_ ;
return $a + $b ;
}
print "The sum of 5 and 10 is: " , sum( 5 , 10 ) , "\n" ;
PHP PHP
<?php
echo "Hello, World!" ;
function sum ( $a , $b ) {
return $a + $b ;
}
echo "The sum of 5 and 10 is: " . sum ( 5 , 10 ) ;
?>
Plain Text Plain Text
This is plain text. It doesn't contain any formatting or special code syntax.
PowerShell PowerShell
Write-Host "Hello, World!"
function Sum {
param ( $a , $b )
return $a + $b
}
Write-Host "The sum of 5 and 10 is: " ( Sum 5 10)
Prolog Prolog
hello_world :- write ( 'Hello, World!' ) , nl.
sum ( A, B, Sum) :- Sum is A + B.
Protobuf Protobuf
syntax = "proto3" ;
message HelloWorld {
string message = 1 ;
}
message SumRequest {
int32 a = 1 ;
int32 b = 2 ;
}
message SumResponse {
int32 sum = 1 ;
}
PureScript PureScript
module Main where
import Prelude
main = log "Hello, World!"
sum :: Int -> Int -> Int
sum a b = a + b
Python Python
print ( "Hello, World!" )
def sum ( a, b) :
return a + b
print ( f"The sum of 5 and 10 is: { sum ( 5 , 10 ) } " )
R R
print( "Hello, World!" )
sum <- function ( a, b) {
return( a + b)
}
print( paste( "The sum of 5 and 10 is:" , sum( 5 , 10 ) ) )
Racket Racket
#lang raket
( displayln "Hello, World!" )
( define ( sum a b)
( + a b) )
( displayln ( sum 5 10 ) )
Reason Reason
Js . log( "Hello, World!" ) ;
let sum = ( a, b) => a + b;
Js . log( "The sum of 5 and 10 is: " + + string_of_int( sum( 5 , 10 ) ) ) ;
Ruby Ruby
puts "Hello, World!"
def sum ( a, b)
a + b
end
puts "The sum of 5 and 10 is: #{ sum( 5 , 10 ) } "
Rust Rust
fn main ( ) {
println! ( "Hello, World!" ) ;
let sum = sum ( 5 , 10 ) ;
println! ( "The sum of 5 and 10 is: {}" , sum) ;
}
fn sum ( a: i32 , b: i32 ) -> i32 {
a + b
}
Sass SCSS
$color : blue;
body {
color : $color ;
}
Scala Scala
object HelloWorld {
def main( args: Array[ String ] ) : Unit = {
println( "Hello, World!" )
println( "The sum of 5 and 10 is: " + sum( 5 , 10 ) )
}
def sum( a: Int , b: Int ) : Int = a + b
}
Scheme Scheme
( display "Hello, World!" )
( newline )
( define ( sum a b)
( + a b) )
( display ( sum 5 10 ) )
( newline )
SCSS SCSS
$background-color : lightgray;
body {
background-color : $background-color ;
}
Shell Shell
#!/bin/bash
echo "Hello, World!"
sum ( ) {
echo $(( $1 + $2 ))
}
echo "The sum of 5 and 10 is: $( sum 5 10 ) "
Solidity Solidity
pragma solidity ^ 0.8.0 ;
contract HelloWorld {
function hello ( ) public pure returns ( string memory ) {
return "Hello, World!" ;
}
function sum ( uint a, uint b) public pure returns ( uint ) {
return a + b;
}
}
SQL SQL
SELECT 'Hello, World!' AS greeting;
SELECT 5 + 10 AS sum;
Swift Swift
import Foundation
print ( "Hello, World!" )
func sum ( _ a: Int , _ b: Int ) -> Int {
return a + b
}
print ( "The sum of 5 and 10 is: \( sum ( 5 , 10 ) ) " )
TOML TOML
title = "Hello, World!"
[ owner ]
name = "John Doe"
age = 30
[ database ]
server = "192.168.1.1"
ports = [ 8000 , 8001 , 8002 ]
TypeScript TypeScript
const hello: string = "Hello, World!" ;
console . log ( hello) ;
function sum ( a: number , b: number ) : number {
return a + b;
}
console . log ( ` The sum of 5 and 10 is: ${ sum ( 5 , 10 ) } ` ) ;
import { createSupabaseBrowser } from "@/lib/supabase/client" ;
export async function getExercises ( categoryName: string ) {
const supabase = createSupabaseBrowser ( ) ;
const { data, error } = await supabase
. from ( "exercises" )
. select ( "*" )
. eq ( "category_name" , categoryName)
. order ( "order" , { ascending: true } ) ;
if ( error) {
throw new Error ( error. message) ;
}
return data;
}
export async function getAllExercises ( ) {
const [ push, pull, legs] = await Promise . all ( [
getExercises ( "Push" ) ,
getExercises ( "Pull" ) ,
getExercises ( "Legs" ) ,
] ) ;
return { push, pull, legs } ;
}
TypeScript
import React from 'react' ;
const HelloWorld: React. FC = ( ) => {
return (
< div>
< h1> Hello, World! < / h1>
< / div>
) ;
} ;
const SumComponent: React. FC = ( ) => {
const sum = ( a: number , b: number ) : number => {
return a + b;
} ;
return (
< div>
< h2> The sum of 5 and 10 is : { sum ( 5 , 10 ) } < / h2>
< / div>
) ;
} ;
const App: React. FC = ( ) => {
return (
< div>
< HelloWorld / >
< SumComponent / >
< / div>
) ;
} ;
export default App;
VB.Net VB.Net
Module HelloWorld
Sub Main( )
Console.WriteLine( "Hello, World!" )
End Sub
Function Sum( a As Integer , b As Integer ) As Integer
Return a + b
End Function
End Module
Verilog Verilog
module hello_world;
initial begin
$display ( "Hello, World!" ) ;
end
endmodule
module sum ( input [ 3 : 0 ] a, input [ 3 : 0 ] b, output [ 3 : 0 ] result) ;
assign result = a + b;
endmodule
VHDL VHDL
library IEEE;
use IEEE. STD_LOGIC_1164. ALL ;
entity HelloWorld is
end HelloWorld;
architecture Behavioral of HelloWorld is
begin
process
begin
report "Hello, World!" ;
wait ;
end process ;
end Behavioral;
entity Sum is
Port ( A : in STD_LOGIC_VECTOR ( 3 downto 0 ) ;
B : in STD_LOGIC_VECTOR ( 3 downto 0 ) ;
SUM : out STD_LOGIC_VECTOR ( 3 downto 0 ) ) ;
end Sum;
architecture Behavioral of Sum is
begin
SUM <= A + B;
end Behavioral;
Visual Basic VB.Net
Module HelloWorld
Sub Main( )
MsgBox( "Hello, World!" )
End Sub
Function Sum( a As Integer , b As Integer ) As Integer
Return a + b
End Function
End Module
WebAssembly (WAT) Plain Text
;; A simple WebAssembly Text (WAT) program to return a number
(module
(func $hello_world (result i32)
i32.const 42 ;; Returns 42
)
(export "hello_world" (func $hello_world))
)
XML XML
< greeting>
< message> Hello, World!</ message>
</ greeting>
< sum>
< a> 5</ a>
< b> 10</ b>
< result> 15</ result>
</ sum>
YAML YAML
greeting : "Hello, World!"
numbers :
a : 5
b : 10
sum : 15
With NoNex, your code blocks will look polished and professional, providing an ideal experience for sharing code snippets on your website.