@react-email/code-block - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "@react-email/code-block",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A code block component that will render code using HTML",
@@ -5,0 +5,0 @@ "sideEffects": false,

readme.md

@@ -1,5 +0,3 @@
-![React Email Hr cover](https://react.email/static/covers/hr.png)
-
-<div align="center"><strong>@react-email/hr</strong></div>
-<div align="center">Display a divider that separates content areas in your email.</div>
+<div align="center"><strong>@react-email/code-block</strong></div>
+<div align="center">Displays code with a selected theme and regex highlighting using prismjs.</div>
 <br />
@@ -21,3 +19,3 @@ <div align="center">
 ```sh
-yarn add @react-email/hr -E
+yarn add @react-email/code-block -E
 ```
@@ -28,17 +26,97 @@
 ```sh
-npm install @react-email/hr -E
+npm install @react-email/code-block -E
 ```
 
-## Getting started
+## Getting Started
 
-Add the component to your email template. Include styles where needed.
+Add the component into your email component as follows.
 
 ```jsx
-import { Hr } from "@react-email/hr";
+import { CodeBlock, dracula } from "@react-email/code-block";
 
 const Email = () => {
-  return <Hr />;
+  const code = `export default async (req, res) => {
+  try {
+    const html = await renderAsync(
+      EmailTemplate({ firstName: 'John' })
+    );
+    return NextResponse.json({ html });
+  } catch (error) {
+    return NextResponse.json({ error });
+  }
+}`;
+
+  return (
+    <CodeBlock
+      code={code}
+      lineNumbers // add this so that there are line numbers beside each code line
+      theme={dracula}
+      language="javascript"
+    />
+  );
 };
 ```
 
+This should render a code-block with the desired theme.
+
+## Theming
+
+Themes for this component are basically a set of styles for each kind of token that can result from prismjs's tokenization. See [here](https://prismjs.com/tokens.html) for more information on the tokens available.
+
+An example of a theme would be this:
+
+```json
+{
+  "base": {
+    "color": "#f8f8f2",
+    "background": "#282a36",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "wordWrap": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "MsHyphens": "none",
+    "hyphens": "none",
+    "padding": "1em",
+    "margin": ".5em 0",
+    "overflow": "auto",
+    "borderRadius": "0.3em"
+  },
+  "comment": {
+    "color": "#6272a4"
+  },
+  "prolog": {
+    "color": "#6272a4"
+  },
+  "doctype": {
+    "color": "#6272a4"
+  },
+  "cdata": {
+    "color": "#6272a4"
+  },
+  "punctuation": {
+    "color": "#f8f8f2"
+  },
+  "property": {
+    "color": "#ff79c6"
+  }
+  // ...
+}
+```
+
+Each token type can have their own defined styles and for each one of there can be any styles that can be applied directly to `React` elements.
+As you can see from the example `dracula` theme though, there is a defined property called `base` which is the styling for the `pre` element that wraps the HTML being rendered.
+
+For you to not need to defined a theme without any basis, or to not define one that already has been defined, we have many default themes exported from `@react-email/code-block`.
+These themes were generated by a bit of code that converts a CSS file for a prismjs theme into a object theme of these.
+If you want to generate a theme from another existing prismjs theme you can do so by looking into [this](https://github.com/gabrielmfern/from-prismjs-to-react-email-code-block-theme).
+
 ## Support
@@ -45,0 +123,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1779261

increased by0.15%

Lines of code

42533

increased by0.01%

Number of lines in readme file

131

increased by147.17%

No dependency changes