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>",
	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: "<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: ["<domain>"],
	oauth_allow_emails: ["<email>"],
	oauth_scopes: ["<scope>"],
	oauth_client_id: "<id>",
	oauth_client_secret: "<secret>",
	oidc_issuer_url: "<url>",
	oidc_client_id: "<id>",
	oidc_client_secret: "<secret>",
	oidc_allow_domains: ["<domain>"],
	oidc_allow_emails: ["<email>"],
	oidc_scopes: ["<scope>"],
	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,
});

<CodeBlock>
	<CodeBlockHeader>
		<Icon />
		<CodeBlockTitle>…</CodeBlockTitle>
	</CodeBlockHeader>
	<CodeBlockBody>
		<CodeBlockCopyButton />
		<CodeBlockCode language="…">
			{code`
				…
			`}
		</CodeBlockCode>
		<CodeBlockExpanderButton />
	</CodeBlockBody>
</CodeBlock>

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

<CodeBlock>
	<CodeBlockHeader>
		<CommandLineIcon />
		<CodeBlockTitle>Command Line</CodeBlockTitle>
	</CodeBlockHeader>
	<CodeBlockBody>
		<CodeBlockCopyButton />
		<CodeBlockCode language="sh">
			{code`sudo unzip ~/Downloads/ngrok-v3-stable-darwin.zip -d /usr/local/bin`}
		</CodeBlockCode>
	</CodeBlockBody>
</CodeBlock>

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.

<CodeBlock>
	<CodeBlockHeader>
		<FileIcon />
		<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
	</CodeBlockHeader>
	<CodeBlockBody>
		<CodeBlockCopyButton />
		<CodeBlockCode language="js">
			{code`
				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.
			`}
		</CodeBlockCode>
	</CodeBlockBody>
</CodeBlock>

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());
});

<CodeBlock>
	<CodeBlockBody>
		<CodeBlockCode language="js">
			{code`
				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());
				});
			`}
		</CodeBlockCode>
	</CodeBlockBody>
</CodeBlock>

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

<CodeBlock>
	<CodeBlockBody>
		<CodeBlockCopyButton />
		<CodeBlockCode language="sh">
			{code`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`}
		</CodeBlockCode>
	</CodeBlockBody>
</CodeBlock>