Support plaintext in code blcok (#195)

* Support plaintext in CodeBlock

* switch default lang to "text" from "sh"

app/routes/components.code-block.tsx

@@ -7,6 +7,7 @@ import {
 	CodeBlockHeader,
 	CodeBlockTitle,
 	fmtCode,
+	supportedLanguages,
 } from "@/code-block";
 import { FileText } from "@phosphor-icons/react/FileText";
 import { Terminal } from "@phosphor-icons/react/Terminal";
@@ -31,7 +32,6 @@ export default function Page() {
 		<div>
 			<h1 className="text-5xl font-medium">Code Block</h1>
 			<p className="mt-4 text-xl text-body">Code blocks render and apply syntax highlighting to blocks of code.</p>
-
 			{/* <h2 className="mt-8 text-3xl font-medium">Examples</h2>
 
 			<h3 className="mt-8 text-xl font-medium">Complete</h3>
@@ -355,6 +355,18 @@ export default function Page() {
 					</CodeBlockBody>
 				</CodeBlock>
 			</section>
+
+			<section className="mb-4 space-y-4">
+				<h2 id="supported-languages" className="text-3xl font-medium">
+					Supported Languages
+				</h2>
+				<p className="text-xl text-body">We support the following languages:</p>
+				<ul className="grid grid-cols-3 place-items-center lg:grid-cols-7">
+					{supportedLanguages.map((language) => (
+						<li key={language}>{language}</li>
+					))}
+				</ul>
+			</section>
 		</div>
 	);
 }

components/code-block/index.tsx

@@ -10,4 +10,4 @@ export {
 
 export { fmtCode } from "./src/fmt-code";
 export { parseMetastring } from "./src/parse-metastring";
-export { isSupportedLanguage, parseLanguage } from "./src/supported-languages";
+export { isSupportedLanguage, parseLanguage, supportedLanguages } from "./src/supported-languages";

components/code-block/src/code-block.tsx

@@ -132,7 +132,7 @@ type CodeBlockCodeProps = WithStyleProps & {
 	 */
 	highlightLines?: (LineRange | number)[];
 	/**
-	 * The language of the code block. This will be used to determine how to syntax highlight the code. @default `"sh"`.
+	 * The language of the code block. This will be used to determine how to syntax highlight the code. @default `"text"`.
 	 */
 	language?: SupportedLanguage;
 	/**
@@ -142,7 +142,7 @@ type CodeBlockCodeProps = WithStyleProps & {
 };
 
 const CodeBlockCode = forwardRef<HTMLPreElement, CodeBlockCodeProps>((props, ref) => {
-	const { className, language = "sh", style, value } = props;
+	const { className, language = "text", style, value } = props;
 	const id = useId();
 	const { hasCodeExpander, isCodeExpanded, registerCodeId, setCopyText, unregisterCodeId } =
 		useContext(CodeBlockContext);

components/code-block/src/supported-languages.ts

@@ -15,15 +15,19 @@ export const supportedLanguages = [
 	"js",
 	"json",
 	"jsx",
+	"plain",
+	"plaintext",
 	"py",
 	"python",
 	"rb",
 	"ruby",
 	"rust",
 	"sh",
 	"shell",
+	"text",
 	"ts",
 	"tsx",
+	"txt",
 	"typescript",
 	"yaml",
 	"yml",

package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",