fix device examples (en); add yaml highlighting (#607)

evcc-io · Aug 28, 2024 · 6bca505 · 6bca505
1 parent 009f392
commit 6bca505
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/devices/vehicles.mdx b/i18n/en/docusaurus-plugin-content-docs/current/devices/vehicles.mdx
@@ -1167,7 +1167,8 @@ vehicles:
       # ...
     limitsoc: # optional in-vehicle limit soc, read-only (%)
       source: # plugin type
-      # ...```
+      # ...
+```
 
 ### evNotify
 

diff --git a/...en/docusaurus-plugin-content-docs/current/devices/vehicles/_generic_support.mdx b/...en/docusaurus-plugin-content-docs/current/devices/vehicles/_generic_support.mdx
@@ -29,4 +29,5 @@ vehicles:
       # ...
     limitsoc: # optional in-vehicle limit soc, read-only (%)
       source: # plugin type
-      # ...```
+      # ...
+```
diff --git a/src/components/DeviceConfig.jsx b/src/components/DeviceConfig.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import s from "./DeviceConfig.module.css";
+import CodeBlock from "@theme/CodeBlock";
 
 const ShowHideCode = ({ code, advanced }) => {
   const [showAdvanced, setShowAdvanced] = useState(false);
@@ -9,10 +10,12 @@ const ShowHideCode = ({ code, advanced }) => {
   };
 
   return (
-    <div>
-      <pre>
-        <code>{showAdvanced ? advanced : code}</code>
-        {advanced ? (
+    <div className={s.root}>
+      <CodeBlock className="language-yaml">
+        {showAdvanced ? advanced : code}
+      </CodeBlock>
+      {advanced ? (
+        <div className={s.advanced}>
           <button
             onClick={toggleShowAdvanced}
             className={s.advancedButton}
@@ -22,8 +25,8 @@ const ShowHideCode = ({ code, advanced }) => {
               {showAdvanced ? "hide advanced options" : "show advanced options"}
             </u>
           </button>
-        ) : null}
-      </pre>
+        </div>
+      ) : null}
     </div>
   );
 };

diff --git a/src/components/DeviceConfig.module.css b/src/components/DeviceConfig.module.css
@@ -7,12 +7,17 @@
   background: none;
   padding: 0;
   cursor: pointer;
+  color: var(--ifm-color-content-secondary);
 }
 
 .advancedButton u {
   text-decoration: underline;
 }
 
-.advancedButton::before {
-  content: "    ";
+.root {
+  margin-bottom: var(--ifm-leading);
+}
+
+.advanced {
+  padding: 0 var(--ifm-pre-padding);
 }