Preview: add hint for live preview

src/resources/markdown_template.js

@@ -1400,9 +1400,15 @@ var handleGraphvizResult = function(id, timeStamp, format, result) {
 };
 
 var setPreviewEnabled = function(enabled) {
+    var hint = '<div class="preview-hint">' +
+               '<h3>Live Preview for Diagrams</h3>' +
+               '<p>Place the cursor on the definition of a diagram to preview.</p>' +
+               '</div>';
+
     if (enabled) {
         contentDiv.style.display = 'none';
         previewDiv.style.display = 'block';
+        previewDiv.innerHTML = hint;
     } else {
         contentDiv.style.display = 'block';
         previewDiv.style.display = 'none';

src/resources/themes/v_detorte/v_detorte.css

@@ -225,6 +225,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;

src/resources/themes/v_moonlight/v_moonlight.css

@@ -223,6 +223,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;

src/resources/themes/v_native/v_native.css

@@ -217,6 +217,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;

src/resources/themes/v_pure/v_pure.css

@@ -219,6 +219,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;