Code
NoNex renders Notionโs code blocks with syntax highlighting, dynamic light/dark theme support, and code copy functionality for a seamless experience on your website.
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
function debounce(func, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; }
// Example usage:
const fetchData = () => { console.log("Fetching data..."); };
const debouncedFetch = debounce(fetchData, 1000);
document.getElementById("search").addEventListener("input", debouncedFetch);
Assembly
section .data
msg db "Hello, World!", 0
section .text
global _start
_start:
mov edx, 13
mov ecx, msg
mov ebx, 1
mov eax, 4
int 0x80
mov eax, 1
xor ebx, ebx
int 0x80
Elm
module Main exposing (main)
import Html exposing (text)
main =
text "Hello, Elm!"
Arduino
// Blink an LED
int ledPin = 13; // Pin where the LED is connected
void setup() {
// Set the digital pin as output
pinMode(ledPin, OUTPUT);
}
void loop() {
// Turn the LED on
digitalWrite(ledPin, HIGH);
delay(1000); // Wait for a second
// Turn the LED off
digitalWrite(ledPin, LOW);
delay(1000); // Wait for a second
}
Bash
#!/bin/bash
# A simple Bash script to back up a directory
SOURCE_DIR="/path/to/source"
BACKUP_DIR="/path/to/backup"
DATE=$(date +%Y%m%d_%H%M%S) # Current date and time
# Create a backup
echo "Backing up $SOURCE_DIR to $BACKUP_DIR/backup_$DATE"
cp -r "$SOURCE_DIR" "$BACKUP_DIR/backup_$DATE"
# Check if the backup was successful
if [ $? -eq 0 ]; then
echo "Backup completed successfully."
else
echo "Backup failed!"
fi
BASIC
REM A simple program to print "Hello, World!" in BASIC
10 PRINT "Hello, World!"
20 END
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
#include <stdio.h>
// A simple C program to print "Hello, World!"
int main() {
printf("Hello, World!\n");
return 0;
}
C#
using System;
// A simple C# program to print "Hello, World!"
class Program
{
static void Main(string[] args)
{
Console.WriteLine("Hello, World!");
}
}
C++
#include <iostream>
using namespace std;
// A simple C++ program to print "Hello, World!"
int main() {
cout << "Hello, World!" << endl;
// Variables and basic operations
int a = 5, b = 10;
int sum = a + b;
// Print the sum of two numbers
cout << "The sum of " << a << " and " << b << " is: " << sum << endl;
// A basic loop
for (int i = 1; i <= 5; i++) {
cout << "Iteration: " << i << endl;
}
return 0;
}
Clojure
(ns example.core)
(defn hello-world []
(println "Hello, World!"))
(hello-world)
CoffeeScript
# A simple CoffeeScript program
square = (x) -> x * x
console.log "The square of 5 is #{square(5)}"
Coq
(* A simple Coq theorem *)
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
/* A simple CSS style */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
Dart
void main() {
print('Hello, World!');
// A simple function to calculate the sum of two numbers
int sum(int a, int b) {
return a + b;
}
print('The sum of 5 and 10 is: ${sum(5, 10)}');
}
Dhall
-- A simple Dhall expression
let Person = { name : Text, age : Natural }
in { name = "Alice", age = 30 } : Person
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
# 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
(* A simple EBNF grammar for arithmetic expressions *)
Expression = Term, {("+" | "-"), Term} ;
Term = Factor, {("*" | "/"), Factor} ;
Factor = Number | "(", Expression, ")" ;
Number = Digit, {Digit} ;
Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" ;
Elixir
# A simple Elixir program
defmodule Example do
def hello_world do
IO.puts("Hello, World!")
end
end
Example.hello_world()
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
-module(hello).
-export([hello_world/0]).
hello_world() ->
io:format("Hello, World!~n").
F#
// A simple F# program to print "Hello, World!"
printfn "Hello, World!"
// A function to calculate the sum of two numbers
let sum a b = a + b
// Print the sum of two numbers
let result = sum 5 10
printfn "The sum of 5 and 10 is: %d" result
// A basic loop using a for expression
for i in 1 .. 5 do
printfn "Iteration: %d" i
Flow
// @flow
function add(a: number, b: number): number {
return a + b;
}
const result = add(5, 10);
console.log(result);
Fortran
program hello
implicit none
print *, "Hello, World!"
end program hello
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)
#version 330 core
layout(location = 0) in vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
Go
package main
import "fmt"
// A simple Go program to print "Hello, World!"
func main() {
fmt.Println("Hello, World!")
}
GraphQL
# A simple GraphQL query
query {
user(id: "1") {
name
email
}
}
Groovy
// A simple Groovy script to print "Hello, World!"
println "Hello, World!"
// A function to calculate the sum of two numbers
def sum(a, b) {
return a + b
}
println "The sum of 5 and 10 is: ${sum(5, 10)}"
Haskell
-- A simple Haskell program to print "Hello, World!"
main :: IO ()
main = putStrLn "Hello, World!"
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
module Main
main : IO ()
main = putStrLn "Hello, World!"
Java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
JavaScript
// A simple JavaScript program to print "Hello, World!"
console.log("Hello, World!");
// A function to calculate the sum of two numbers
function sum(a, b) {
return a + b;
}
console.log("The sum of 5 and 10 is:", sum(5, 10));
JSON
{
"greeting": "Hello, World!",
"numbers": {
"a": 5,
"b": 10,
"sum": 15
}
}
Julia
# A simple Julia program to print "Hello, World!"
println("Hello, World!")
# A function to calculate the sum of two numbers
function sum(a, b)
return a + b
end
println("The sum of 5 and 10 is: ", sum(5, 10))
Kotlin
fun main() {
println("Hello, World!")
// A function to calculate the sum of two numbers
fun sum(a: Int, b: Int): Int {
return a + b
}
println("The sum of 5 and 10 is: ${sum(5, 10)}")
}
LaTeX
\documentclass{article}
\begin{document}
\title{Hello World}
\author{Your Name}
\date{\today}
\maketitle
Hello, World!
\end{document}
Less
// A simple Less stylesheet
@primary-color: #4CAF50;
body {
background-color: @primary-color;
color: white;
font-family: Arial, sans-serif;
}
h1 {
color: darken(@primary-color, 10%);
}
Lisp
; A simple Lisp program to print "Hello, World!"
(defun hello-world ()
(format t "Hello, World!"))
(hello-world)
LiveScript
# A simple LiveScript program to print "Hello, World!"
console.log "Hello, World!"
# A function to calculate the sum of two numbers
sum = (a, b) -> a + b
console.log "The sum of 5 and 10 is: #{sum 5, 10}"
LLVM IR
; A simple LLVM IR program to add two integers
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
-- A simple Lua program to print "Hello, World!"
print("Hello, World!")
-- A function to calculate the sum of two numbers
function sum(a, b)return a + b
end
print("The sum of 5 and 10 is: " .. sum(5, 10))
Makefile
# A simple Makefile to compile a C program
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
# Hello World
This is a simple Markdown document.
## Code Block
```python
print("Hello, World!")
XML
### Markup (XML)
```xml
<!-- A simple XML document -->
<?xml version="1.0" encoding="UTF-8"?>
<greeting>
<message>Hello, World!</message>
</greeting>
MATLAB
% A simple MATLAB program to print "Hello, World!"
disp('Hello, World!');
% A function to calculate the sum of two numbers
function result = sum(a, b)
result = a + b;
end
result = sum(5, 10);
disp(['The sum of 5 and 10 is: ', num2str(result)]);
Mathematica
(* A simple Mathematica program to print "Hello, World!" *)
Print["Hello, World!"];
(* A function to calculate the sum of two numbers *)
sum[a_, b_] := a + b
result = sum[5, 10];
Print["The sum of 5 and 10 is: ", result];
Mermaid
%% A simple Mermaid diagram
graph TD;
A[Hello, World!] --> B{Sum};
B -->|5| C[5];
B -->|10| D[10];
C --> E[Result];
D --> E;
graph TD;
A[User] -->|Enters URL| B[Browser]
B -->|Sends HTTP Request| C[DNS Resolver]
C -->|Resolves Domain to IP| D[Web Server]
D -->|Processes Request| E{Static or Dynamic Content?}
E -->|Static| F[Serve Static Files]
E -->|Dynamic| G[Application Server]
G -->|Fetches Data| H[Database]
H -->|Returns Data| G
G -->|Generates HTML| I[Web Server]
F -->|Sends Response| J[Browser]
I -->|Sends Response| J
J -->|Parses HTML| K[DOM Construction]
K -->|Loads Resources| L[CSS, JS, Images]
L -->|Executes JS| M[Render Page]
M -->|Displays Content| N[User Sees Website]
Nix
# A simple Nix expression to define a package
{ 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
// A simple Notion formula to calculate the sum of two properties
prop1 + prop2
2 + 5 /* Output: 7 */
"Monkey D." + " Luffy" /* Output: "Monkey D. Luffy" */
add(4,7) /* Output: 11 */
40.add(2) /* Output: 42 */
12 - 5 /* Output: 7 */
subtract(5, 12) /* Output: -7 */
47.subtract(5) /* Output: 42 */
12 * 4 /* Output: 48 */
multiply(12,-4) /* Output: -48 */
21.multiply(2) /* Output: 42 */
1 == 1 /* Output: true */
equal(1, 1) /* Output: true */
1.equal(1) /* Output: true */
1 == 2 /* Output: false */
"1" == 1 /* Output: false */
toNumber("1") == 1 /* Output: true (uses the toNumber function to convert "1" to a number */
2 ^ 2 == 4 /* Output: true */
length("Monkey D. Luffy") == 15 /* Output: true */
[1, 2] == [2, 1] /* Output: false */
Objective-C
#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
(* A simple OCaml program to print "Hello, World!" *)
let () =
print_endline "Hello, World!";
(* A function to calculate the sum of two numbers *)
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
program HelloWorld;
begin
writeln('Hello, World!');
{ A function to calculate the sum of two numbers }
function Sum(a, b: Integer): Integer;
begin
Sum := a + b;
end;
writeln('The sum of 5 and 10 is: ', Sum(5, 10));
end.
Perl
print "Hello, World!\n";
# A function to calculate the sum of two numbers
sub sum {
my ($a, $b) = @_;
return $a + $b;
}
print "The sum of 5 and 10 is: ", sum(5, 10), "\n";
PHP
<?php
// A simple PHP program to print "Hello, World!"
echo "Hello, World!";
// Function to calculate the sum of two numbers
function sum($a, $b) {
return $a + $b;
}
echo "The sum of 5 and 10 is: " . sum(5, 10);
?>
Plain Text
This is plain text. It doesn't contain any formatting or special code syntax.
PowerShell
# A simple PowerShell script to print "Hello, World!"
Write-Host "Hello, World!"
# Function to calculate the sum of two numbers
function Sum {
param($a, $b)
return $a + $b
}
Write-Host "The sum of 5 and 10 is: " (Sum 5 10)
Prolog
% A simple Prolog program to print "Hello, World!"
hello_world :- write('Hello, World!'), nl.
% Rule to calculate the sum of two numbers
sum(A, B, Sum) :- Sum is A + B.
Protobuf
syntax = "proto3";
message HelloWorld {
string message = 1;
}
message SumRequest {
int32 a = 1;
int32 b = 2;
}
message SumResponse {
int32 sum = 1;
}
PureScript
module Main where
import Prelude
-- A simple PureScript program to print "Hello, World!"
main = log "Hello, World!"
-- Function to calculate the sum of two numbers
sum :: Int -> Int -> Int
sum a b = a + b
Python
# A simple Python program to print "Hello, World!"
print("Hello, World!")
# Function to calculate the sum of two numbers
def sum(a, b):
return a + b
print(f"The sum of 5 and 10 is: {sum(5, 10)}")
R
# A simple R program to print "Hello, World!"
print("Hello, World!")
# Function to calculate the sum of two numbers
sum <- function(a, b) {
return(a + b)
}
print(paste("The sum of 5 and 10 is:", sum(5, 10)))
Racket
#lang raket
; A simple Racket program to print "Hello, World!"
(displayln "Hello, World!")
; Function to calculate the sum of two numbers
(define (sum a b)
(+ a b))
(displayln (sum 5 10))
Reason
/* A simple Reason program to print "Hello, World!" */
Js.log("Hello, World!");
/* Function to calculate the sum of two numbers */
let sum = (a, b) => a + b;
Js.log("The sum of 5 and 10 is: " ++ string_of_int(sum(5, 10)));
Ruby
# A simple Ruby program to print "Hello, World!"
puts "Hello, World!"
# Function to calculate the sum of two numbers
def sum(a, b)
a + b
end
puts "The sum of 5 and 10 is: #{sum(5, 10)}"
Rust
fn main() {
// A simple Rust program to print "Hello, World!"
println!("Hello, World!");
// Function to calculate the sum of two numbers
let sum = sum(5, 10);
println!("The sum of 5 and 10 is: {}", sum);
}
fn sum(a: i32, b: i32) -> i32 {
a + b
}
Sass
// A simple Sass code to set text color
$color: blue;
body {
color: $color;
}
Scala
object HelloWorld {
def main(args: Array[String]): Unit = {
// A simple Scala program to print "Hello, World!"
println("Hello, World!")
// Function to calculate the sum of two numbers
println("The sum of 5 and 10 is: " + sum(5, 10))
}
def sum(a: Int, b: Int): Int = a + b
}
Scheme
; A simple Scheme program to print "Hello, World!"
(display "Hello, World!")
(newline)
; Function to calculate the sum of two numbers
(define (sum a b)
(+ a b))
(display (sum 5 10))
(newline)
SCSS
// A simple SCSS code to set background color
$background-color: lightgray;
body {
background-color: $background-color;
}
Shell
#!/bin/bash
# A simple Shell script to print "Hello, World!"
echo "Hello, World!"
# Function to calculate the sum of two numbers
sum() {
echo $(($1 + $2))
}
echo "The sum of 5 and 10 is: $(sum 5 10)"
Solidity
// A simple Solidity contract to print "Hello, World!"
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
-- A simple SQL query to select 'Hello, World!'
SELECT 'Hello, World!' AS greeting;
-- A query to calculate the sum of two numbers
SELECT 5 + 10 AS sum;
Swift
import Foundation
// A simple Swift program to print "Hello, World!"
print("Hello, World!")
// Function to calculate the sum of two numbers
func sum(_ a: Int, _ b: Int) -> Int {
return a + b
}
print("The sum of 5 and 10 is: \(sum(5, 10))")
TOML
# A simple TOML configuration
title = "Hello, World!"
[owner]
name = "John Doe"
age = 30
[database]
server = "192.168.1.1"
ports = [ 8000, 8001, 8002 ]
TypeScript
import React from 'react';
// A simple functional component that returns "Hello, World!"
const HelloWorld: React.FC = () => {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
};
// Component with a sum function that calculates the sum of two numbers
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>
);
};
// Main App component
const App: React.FC = () => {
return (
<div>
<HelloWorld />
<SumComponent />
</div>
);
};
export default App;
VB.Net
' A simple VB.Net program to print "Hello, World!"
Module HelloWorld
Sub Main()
Console.WriteLine("Hello, World!")
End Sub
' Function to calculate the sum of two numbers
Function Sum(a As Integer, b As Integer) As Integer
Return a + b
End Function
End Module
Verilog
// A simple Verilog module to output "Hello, World!"
module hello_world;
initial begin
$display("Hello, World!");
end
endmodule
// Module to calculate the sum of two numbers
module sum(input [3:0] a, input [3:0] b, output [3:0] result);
assign result = a + b;
endmodule
VHDL
-- A simple VHDL program to print "Hello, World!"
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 to calculate the sum of two numbers
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
' A simple Visual Basic program to print "Hello, World!"
Module HelloWorld
Sub Main()
MsgBox("Hello, World!")
End Sub
' Function to calculate the sum of two numbers
Function Sum(a As Integer, b As Integer) As Integer
Return a + b
End Function
End Module
WebAssembly (WAT)
;; 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
<!-- A simple XML document with a greeting message -->
<greeting>
<message>Hello, World!</message>
</greeting>
<!-- Example of adding two numbers -->
<sum>
<a>5</a>
<b>10</b>
<result>15</result>
</sum>
YAML
# A simple YAML configuration
greeting: "Hello, World!"
# Function to sum two numbers
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.