diff --git a/src/components/example/index.css b/src/components/example/index.css
index 74fb090..bb3d093 100644
--- a/src/components/example/index.css
+++ b/src/components/example/index.css
@@ -15,20 +15,20 @@
line-height: 1.9;
}
-.example .regexr-link {
+.example .demo-link {
margin-left: 1em;
opacity: 0.6;
}
-.example .regexr-link:hover,
-.example .regexr-link:active,
-.example .regexr-link:focus {
+.example .demo-link:hover,
+.example .demo-link:active,
+.example .demo-link:focus {
color: hsl(219, 100%, 47%);
opacity: 1;
}
@media print {
- .example .regexr-link {
+ .example .demo-link {
display: none;
}
}
diff --git a/src/components/example/index.js b/src/components/example/index.js
index 66ed559..04a4365 100644
--- a/src/components/example/index.js
+++ b/src/components/example/index.js
@@ -18,6 +18,10 @@ const Example = (props) => {
)}&text=${encodeURIComponent(playGroundText)}
`.trim();
+ const visualizationUrl = `
+ https://regexper.com/#${encodeURIComponent(regex.toString())}
+ `.trim();
+
const noop = ({ children }) => <>{children}>;
const code = ({ children }) => (
{children}
@@ -33,13 +37,22 @@ const Example = (props) => {
[RegExr]
+
+ [Visualization]
+
+