Redirect: syntax highlight for $variable (#634)

<img width="607" height="320" alt="Screenshot_2025-07-16_16-42-23"
src="https://github.com/user-attachments/assets/3eb38c81-6c88-4772-a234-39dc62e55252"
/>


Closes #82

---------

Co-authored-by: Anthony Johnson <[email protected]>

Author: humitos

readthedocsext/theme/static/readthedocsext/theme/js/site.js

@@ -1,44 +1,48 @@
 {% extends "projects/redirect_list.html" %}
 
-{% load i18n %}
-{% load crispy_forms_tags %}
-{% load ext_theme_tags %}
+{% load trans from i18n %}
+{% load crispy from crispy_forms_tags %}
+{% load alter_field from ext_theme_tags %}
 
 {% block project_edit_content_subheader %}
   {% if object %}
     {% trans "Update redirect" %}
   {% else %}
     {% trans "Add redirect" %}
   {% endif %}
-{% endblock %}
+{% endblock project_edit_content_subheader %}
 
 {% block project_edit_content %}
-  <form class="ui form" method="post" action="." data-bind="using: ProjectRedirectView()">
+  <form class="ui form"
+        method="post"
+        action="."
+        data-bind="using: ProjectRedirectView()">
     {% csrf_token %}
     {% alter_field form.redirect_type data_bind="valueInit: redirect_type" %}
     {% alter_field form.from_url data_bind="valueInit: from_url, textInput: from_url, enable: is_from_url_visible" %}
     {% alter_field form.to_url data_bind="valueInit: to_url, textInput: to_url, enable: is_to_url_visible" %}
     {{ form|crispy }}
 
-    <div class="ui disabled segment" data-bind="css: {disabled: is_example_disabled}">
-      <div data-bind="visible: !is_example_disabled()" style="display: none;">
+    <div class="ui disabled segment"
+         data-bind="css: {disabled: is_example_disabled}">
+      <div class="ko hidden" data-bind="css: {hidden: is_example_disabled()}">
         <div class="ui list">
           <div class="item">
-            <div class="sub header">
-              {% trans "Redirect from" %}
-            </div>
-            <code data-bind="text: redirect_from"></code>
+            <div class="sub header">{% trans "Redirect from" %}</div>
+            <code>
+              <span data-bind="html: redirect_from_prefix"></span><span data-bind="text: redirect_from"></span>
+            </code>
           </div>
           <div class="item">
-            <div class="sub header">
-              {% trans "Redirect to" %}
-            </div>
-            <code data-bind="text: redirect_to"></code>
+            <div class="sub header">{% trans "Redirect to" %}</div>
+            <code>
+              <span data-bind="html: redirect_to_prefix"></span><span data-bind="text: redirect_to"></span>
+            </code>
           </div>
         </div>
       </div>
     </div>
 
     <input class="ui primary button" type="submit" value="{% trans "Save" %}">
   </form>
-{% endblock %}
+{% endblock project_edit_content %}

readthedocsext/theme/templates/projects/redirect_form.html

@@ -47,35 +47,63 @@ export class ProjectRedirectView {
     this.is_from_url_visible = ko.observable();
     this.is_to_url_visible = ko.observable();
 
+    // HTML prefix content for from field, don't use user input here
+    this.redirect_from_prefix = ko.computed(() => {
+      const redirect_type = this.redirect_type();
+      const lang_part = `/<span class="ui violet text">$lang</span>`;
+      const version_part = `/<span class="ui violet text">$version</span>`;
+
+      if (redirect_type === "page") {
+        return `${lang_part}${version_part}/`;
+      } else if (redirect_type === "clean_url_to_html") {
+        return `${lang_part}${version_part}/<span class="ui violet text">$file</span>/`;
+      } else if (redirect_type === "clean_url_without_trailing_slash_to_html") {
+        return `${lang_part}${version_part}/<span class="ui violet text">$file</span>`;
+      } else if (redirect_type === "html_to_clean_url") {
+        return `${lang_part}${version_part}/<span class="ui violet text">$file</span>.html`;
+      }
+      return "";
+    });
+    // User input for from field as text, no HTML allowed
     this.redirect_from = ko.computed(() => {
-      var from_url = this.from_url();
-      var redirect_type = this.redirect_type();
+      const from_url = this.from_url();
+      const redirect_type = this.redirect_type();
       if (redirect_type === "prefix") {
         return from_url + "faq.html";
       } else if (redirect_type === "page") {
-        return "/$lang/$version/" + from_url.replace(/^\/+/, "");
+        return from_url.replace(/^\/+/, "");
       } else if (redirect_type === "exact") {
         return from_url;
+      }
+      return "";
+    });
+    // HTML prefix content for to field, don't use user input here.
+    this.redirect_to_prefix = ko.computed(() => {
+      const redirect_type = this.redirect_type();
+      const lang_part = `/<span class="ui violet text">$lang</span>`;
+      const version_part = `/<span class="ui violet text">$version</span>`;
+
+      if (redirect_type === "prefix") {
+        return `${lang_part}${version_part}/faq.html`;
+      } else if (redirect_type === "page") {
+        return `${lang_part}${version_part}/`;
       } else if (redirect_type === "clean_url_to_html") {
-        return "/$lang/$version/$file/";
+        return `${lang_part}${version_part}/<span class="ui violet text">$file</span>.html`;
       } else if (redirect_type === "clean_url_without_trailing_slash_to_html") {
-        return "/$lang/$version/$file";
+        return `${lang_part}${version_part}/<span class="ui violet text">$file</span>.html`;
+      } else if (redirect_type === "html_to_clean_url") {
+        return `${lang_part}${version_part}/<span class="ui violet text">$file</span>/`;
       }
       return "";
     });
+    // User input for to field as text, no HTML allowed
     this.redirect_to = ko.computed(() => {
       const to_url = this.to_url();
       const redirect_type = this.redirect_type();
-      if (redirect_type === "prefix") {
-        return "/$lang/$version/faq.html";
-      } else if (redirect_type === "page") {
-        return "/$lang/$version/" + to_url.replace(/^\/+/, "");
+      if (redirect_type === "page") {
+        return to_url.replace(/^\/+/, "");
       } else if (redirect_type === "exact") {
         return to_url;
-      } else if (redirect_type === "clean_url_to_html") {
-        return "/$lang/$version/$file.html";
-      } else if (redirect_type === "clean_url_without_trailing_slash_to_html") {
-        return "/$lang/$version/$file.html";
       }
       return "";
     });
@@ -95,6 +123,7 @@ export class ProjectRedirectView {
         [
           "clean_url_to_html",
           "clean_url_without_trailing_slash_to_html",
+          "html_to_clean_url",
         ].includes(redirect_type)
       ) {
         this.is_example_disabled(false);