Code Block

Code blocks render and apply syntax highlighting to blocks of code.

ngrok-example.js

const listener = await ngrok.connect({
	// session configuration
	addr: `localhost:8080`, // or `8080` or `unix:${UNIX_SOCKET}`
	authtoken: "",
	authtoken_from_env: true,
	on_status_change: (addr, error) => {
		console.log(`disconnected, addr ${addr} error: ${error}`);
	},
	session_metadata: "Online in One Line",
	// listener configuration
	allow_user_agent: "^mozilla.*",
	basic_auth: ["ngrok:online1line"],
	circuit_breaker: 0.1,
	compression: true,
	deny_user_agent: "^curl.*",
	domain: "",
	ip_restriction_allow_cidrs: ["0.0.0.0/0"],
	ip_restriction_deny_cidrs: ["10.1.1.1/32"],
	metadata: "example listener metadata from nodejs",
	mutual_tls_cas: [fs.readFileSync('ca.crt', 'utf8')],
	oauth_provider: "google",
	oauth_allow_domains: [""],
	oauth_allow_emails: [""],
	oauth_scopes: [""],
	oauth_client_id: "",
	oauth_client_secret: "",
	oidc_issuer_url: "",
	oidc_client_id: "",
	oidc_client_secret: "",
	oidc_allow_domains: [""],
	oidc_allow_emails: [""],
	oidc_scopes: [""],
	proxy_proto: "", // One of: "", "1", "2"
	request_header_remove: ["X-Req-Nope"],
	response_header_remove: ["X-Res-Nope"],
	request_header_add: ["X-Req-Yup:true"],
	response_header_add: ["X-Res-Yup:true"],
	schemes: ["HTTPS"],
	verify_webhook_provider: "twilio",
	verify_webhook_secret: "asdf",
	websocket_tcp_converter: true,
});

import {
	CodeBlock,
	CodeBlockBody,
	CodeBlockCode,
	CodeBlockCopyButton,
	CodeBlockExpanderButton,
	CodeBlockHeader,
	CodeBlockTitle,
	fmtCode,
} from "@ngrok/mantle/code-block";


	
		
		…

Examples

Single Line with a Header

Many code blocks will be single line command line prompts and should be able to render with a header and copy button. This makes it absolutely clear that this example is a command line prompt and not a code sample.

Command Line

sudo unzip ~/Downloads/ngrok-v3-stable-darwin.zip -d /usr/local/bin


	
		
		Command Line

Horizontal Scrolling

This example is included to demonstrate that code blocks can scroll horizontally if the content is too wide. Mantle attempts to normalize scrollbar styling across browsers and platforms.

ngrok-example.js

const http = require('http');
const ngrok = require("@ngrok/ngrok");
const server = http.createServer((req, res) => {
	res.writeHead(200);
	res.end("Hello!");
	setTimeout(() => {
		Promise.resolve(() => {
			console.log("url:", server.tunnel.url());
		})
	}, timeout);
});
// Consumes authtoken from env automatically
ngrok.listen(server).then(() => {
	console.log("url:", server.tunnel.url());
});
// really long line here that should wrap around and stuff Officia ipsum sint eu labore esse deserunt aliqua quis irure.


	
		
		ngrok-example.js
	
	
		
		 {
					res.writeHead(200);
					res.end("Hello!");
					setTimeout(() => {
						Promise.resolve(() => {
							console.log("url:", server.tunnel.url());
						})
					}, timeout);
				});
				// Consumes authtoken from env automatically
				ngrok.listen(server).then(() => {
					console.log("url:", server.tunnel.url());
				});
				// really long line here that should wrap around and stuff Officia ipsum sint eu labore esse deserunt aliqua quis irure.
			`}
		/>

No Header or Copy Button

This is the most simple example of our code block component. While very useful, the copy button is optional. It is also perfectly acceptable to render a code block without a header, especially if context is provided in the surrounding content or the code block is self-explanatory eg. “In your index.js file, paste the following:”.

const http = require('http');
const ngrok = require("@ngrok/ngrok");
const server = http.createServer((req, res) => {
	res.writeHead(200);
	res.end("Hello!");
});
// Consumes authtoken from env automatically
ngrok.listen(server).then(() => {
	console.log("url:", server.tunnel.url());
});


	
		 {
					res.writeHead(200);
					res.end("Hello!");
				});
				// Consumes authtoken from env automatically
				ngrok.listen(server).then(() => {
					console.log("url:", server.tunnel.url());
				});
			`}
		/>

Single Line with Horizontal Scrolling

This example is included to show the interaction between the copy button and horizontal scrolling on a single verbose terminal command.

ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4

Supported Languages

Mantle supports the following languages:

bash
cs
csharp
css
dotnet
go
html
java
javascript
js
json
jsx
markup
plain
plaintext
py
python
rb
ruby
rust
sh
shell
text
ts
tsx
txt
typescript
xml
yaml
yml