diff --git a/core/misc/machine-name.js b/core/misc/machine-name.js
index 7f3c59d..c3d53c5 100644
--- a/core/misc/machine-name.js
+++ b/core/misc/machine-name.js
@@ -120,10 +120,10 @@
           machine = self.transliterate($source.val(), options);
         }
         // Append the machine name preview to the source field.
-        var $preview = $('<span class="machine-name-value">' + options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix + '</span>');
+        var $preview = $(Drupal.theme('machineNameValue', machine, options));
         $suffix.empty();
         if (options.label) {
-          $suffix.append('<span class="machine-name-label">' + options.label + ': </span>');
+          $suffix.append(Drupal.theme('machineNameLabel', options.label));
         }
         $suffix.append($preview);
 
@@ -141,7 +141,7 @@
           options: options
         };
         // If it is editable, append an edit link.
-        var $link = $('<span class="admin-link"><button type="button" class="link">' + Drupal.t('Edit') + '</button></span>').on('click', eventData, clickEditHandler);
+        var $link = $(Drupal.theme('machineNameEditLink')).on('click', eventData, clickEditHandler);
         $suffix.append($link);
 
         // Preview the machine name in realtime when the human-readable name
@@ -208,4 +208,49 @@
     }
   };
 
+  /**
+   * Theme function for a machine name label.
+   *
+   * @param {string} label
+   *   String with the label to show for the machine name preview.
+   *
+   * @return {string}
+   *   This function returns a string with the markup for a
+   *   machine name's label.
+   */
+  Drupal.theme.machineNameLabel = function (label) {
+    return '<span class="machine-name-label">' + label + ': </span>';
+  };
+
+  /**
+   * Theme function for a machine name's preview value.
+   *
+   * @param {jQuery} machine
+   *   The transliterated string with the machine name's preview value.
+   * @param {object} options
+   *   An object with the following keys:
+   * @param {string} options.field_prefix
+   *   Optional string to be prepended to the machine name value.
+   * @param {string} options.field_suffix
+   *   Optional string to be appended to the machine name value.
+   *
+   * @return {string}
+   *   This function returns a string with the markup for a
+   *   machine name's preview value.
+   */
+  Drupal.theme.machineNameValue = function (machine, options) {
+    return '<span class="machine-name-value">' + options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix + '</span>';
+  };
+
+  /**
+   * Theme function for a machine name edit link.
+   *
+   * @return {string}
+   *   This function returns a string with the markup for a
+   *   machine name's edit link.
+   */
+  Drupal.theme.machineNameEditLink = function () {
+    return '<span class="admin-link test"><button type="button" class="link">' + Drupal.t('Edit') + '</button></span>';
+  };
+
 })(jQuery, Drupal, drupalSettings);