Distinguish raw css from other classes

front/src/components/Rules/Rule.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="rule" :style="rule.rules">
-    <template v-if="rule.is_codeblock">
+  <div class="rule" :class="classes" :style="rule.rules">
+    <pre v-if="rule.is_codeblock">
       {{ contentFiltered }}
-    </template>
+    </pre>
     <template v-else>
       <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
       <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
@@ -29,12 +29,18 @@ export default {
 
       return c;
     },
+    classes() {
+      let style = "";
+      if (this.rule.is_codeblock) {
+        style += " raw";
+      }
+      return style;
+    },
   },
 };
 </script>
 
 <style scoped>
-
 .rule {
   margin: 1em 0;
 }
@@ -42,4 +48,25 @@ export default {
 .rule p {
   margin: 0;
 }
+
+.rule.raw {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid black;
+  position: relative;
+}
+
+.rule.raw:after {
+  content: "raw css";
+  background-color: #333;
+  border-radius: 10px;
+  position: absolute;
+  bottom: -0.5em;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 3px;
+  border: 1px solid white;
+}
 </style>

front/src/store/index.js

@@ -15,7 +15,7 @@ let toCSS = (message, currentStream) => {
     rules = [],
     parentClassName = currentStream,
     id = message.id,
-    is_codeblock = message.content.includes("<code>");
+    is_codeblock = message.content.includes("<code>") || message.content.startsWith("```");
 
   // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
   let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm