diff --git a/core/lib/Drupal/Component/Diff/Engine/HWLDFWordAccumulator.php b/core/lib/Drupal/Component/Diff/Engine/HWLDFWordAccumulator.php
index a67e8ca..8be8e8c 100644
--- a/core/lib/Drupal/Component/Diff/Engine/HWLDFWordAccumulator.php
+++ b/core/lib/Drupal/Component/Diff/Engine/HWLDFWordAccumulator.php
@@ -8,7 +8,6 @@
 namespace Drupal\Component\Diff\Engine;
 
 use Drupal\Component\Utility\Unicode;
-use Drupal\Component\Utility\SafeMarkup;
 
 /**
  *  Additions by Axel Boldt follow, partly taken from diff.php, phpwiki-1.3.3
@@ -38,10 +37,10 @@ class HWLDFWordAccumulator {
   protected function _flushGroup($new_tag) {
     if ($this->group !== '') {
       if ($this->tag == 'mark') {
-        $this->line = SafeMarkup::format('@original_line<span class="diffchange">@group</span>', ['@original_line' => $this->line, '@group' => $this->group]);
+        $this->line = $this->line . '<span class="diffchange">' . $this->group . '</span>';
       }
       else {
-        $this->line = SafeMarkup::format('@original_line@group', ['@original_line' => $this->line, '@group' => $this->group]);
+        $this->line = $this->line . $this->group;
       }
     }
     $this->group = '';
diff --git a/core/lib/Drupal/Core/Diff/DiffFormatter.php b/core/lib/Drupal/Core/Diff/DiffFormatter.php
index cfd6bb8..2758351 100644
--- a/core/lib/Drupal/Core/Diff/DiffFormatter.php
+++ b/core/lib/Drupal/Core/Diff/DiffFormatter.php
@@ -9,7 +9,7 @@
 
 use Drupal\Component\Diff\DiffFormatter as DiffFormatterBase;
 use Drupal\Component\Diff\WordLevelDiff;
-use Drupal\Component\Utility\SafeMarkup;
+use Drupal\Component\Utility\Html;
 use Drupal\Core\Config\ConfigFactoryInterface;
 
 /**
@@ -107,7 +107,7 @@ protected function addedLine($line) {
         'class' => 'diff-marker',
       ),
       array(
-        'data' => $line,
+        'data' => ['#markup' => $line],
         'class' => 'diff-context diff-addedline',
       )
     );
@@ -129,7 +129,7 @@ protected function deletedLine($line) {
         'class' => 'diff-marker',
       ),
       array(
-        'data' => $line,
+        'data' => ['#markup' => $line],
         'class' => 'diff-context diff-deletedline',
       )
     );
@@ -148,7 +148,7 @@ protected function contextLine($line) {
     return array(
       ' ',
       array(
-        'data' => $line,
+        'data' => ['#markup' => $line],
         'class' => 'diff-context',
       )
     );
@@ -172,7 +172,7 @@ protected function emptyLine() {
    */
   protected function _added($lines) {
     foreach ($lines as $line) {
-      $this->rows[] = array_merge($this->emptyLine(), $this->addedLine(SafeMarkup::checkPlain($line)));
+      $this->rows[] = array_merge($this->emptyLine(), $this->addedLine(Html::escape($line)));
     }
   }
 
@@ -181,7 +181,7 @@ protected function _added($lines) {
    */
   protected function _deleted($lines) {
     foreach ($lines as $line) {
-      $this->rows[] = array_merge($this->deletedLine(SafeMarkup::checkPlain($line)), $this->emptyLine());
+      $this->rows[] = array_merge($this->deletedLine(Html::escape($line)), $this->emptyLine());
     }
   }
 
@@ -190,7 +190,7 @@ protected function _deleted($lines) {
    */
   protected function _context($lines) {
     foreach ($lines as $line) {
-      $this->rows[] = array_merge($this->contextLine(SafeMarkup::checkPlain($line)), $this->contextLine(SafeMarkup::checkPlain($line)));
+      $this->rows[] = array_merge($this->contextLine(Html::escape($line)), $this->contextLine(Html::escape($line)));
     }
   }
 
@@ -198,6 +198,8 @@ protected function _context($lines) {
    * {@inheritdoc}
    */
   protected function _changed($orig, $closing) {
+    $orig = array_map('\Drupal\Component\Utility\Html::escape', $orig);
+    $closing = array_map('\Drupal\Component\Utility\Html::escape', $closing);
     $diff = new WordLevelDiff($orig, $closing);
     $del = $diff->orig();
     $add = $diff->closing();
diff --git a/core/modules/config/src/Tests/ConfigImportUITest.php b/core/modules/config/src/Tests/ConfigImportUITest.php
index dd00edf..8c2e5bf 100644
--- a/core/modules/config/src/Tests/ConfigImportUITest.php
+++ b/core/modules/config/src/Tests/ConfigImportUITest.php
@@ -7,6 +7,7 @@
 
 namespace Drupal\config\Tests;
 
+use Drupal\Component\Utility\Html;
 use Drupal\Component\Utility\SafeMarkup;
 use Drupal\Core\Config\InstallStorage;
 use Drupal\simpletest\WebTestBase;
@@ -275,23 +276,41 @@ function testImportDiff() {
     $change_key = 'foo';
     $remove_key = '404';
     $add_key = 'biff';
-    $add_data = 'bangpow';
-    $change_data = 'foobar';
+    $add_data = '<em>bangpow</em>';
+    $change_data = '<p><em>foobar</em></p>';
     $original_data = array(
-      'foo' => 'bar',
-      '404' => 'herp',
+      'foo' => '<p>foobar</p>',
+      'baz' => '<strong>no change</strong>',
+      '404' => '<em>herp</em>',
     );
+    // Update active storage to have html in config data.
+    $this->config($config_name)->setData($original_data)->save();
 
     // Change a configuration value in staging.
     $staging_data = $original_data;
     $staging_data[$change_key] = $change_data;
     $staging_data[$add_key] = $add_data;
+    unset($staging_data[$remove_key]);
     $staging->write($config_name, $staging_data);
 
     // Load the diff UI and verify that the diff reflects the change.
     $this->drupalGet('admin/config/development/configuration/sync/diff/' . $config_name);
     $this->assertTitle(format_string('View changes of @config_name | Drupal', array('@config_name' => $config_name)));
 
+    // The following assertions do not use $this::assertEscaped() because
+    // \Drupal\Component\Diff\DiffFormatter adds markup that signifies what has
+    // changed.
+
+    // Changed values are escaped.
+    $this->assertText(Html::escape("foo: '<p><em>foobar</em></p>'"));
+    $this->assertText(Html::escape("foo: '<p>foobar</p>'"));
+    // The no change values are escaped.
+    $this->assertText(Html::escape("baz: '<strong>no change</strong>'"));
+    // Added value is escaped.
+    $this->assertText(Html::escape("biff: '<em>bangpow</em>'"));
+    // Deleted value is escaped.
+    $this->assertText(Html::escape("404: '<em>herp</em>'"));
+
     // Reset data back to original, and remove a key
     $staging_data = $original_data;
     unset($staging_data[$remove_key]);
@@ -299,6 +318,11 @@ function testImportDiff() {
 
     // Load the diff UI and verify that the diff reflects a removed key.
     $this->drupalGet('admin/config/development/configuration/sync/diff/' . $config_name);
+    // The no change values are escaped.
+    $this->assertText(Html::escape("foo: '<p>foobar</p>'"));
+    $this->assertText(Html::escape("baz: '<strong>no change</strong>'"));
+    // Removed key is escaped.
+    $this->assertText(Html::escape("404: '<em>herp</em>'"));
 
     // Reset data back to original and add a key
     $staging_data = $original_data;
@@ -307,6 +331,11 @@ function testImportDiff() {
 
     // Load the diff UI and verify that the diff reflects an added key.
     $this->drupalGet('admin/config/development/configuration/sync/diff/' . $config_name);
+    // The no change values are escaped.
+    $this->assertText(Html::escape("baz: '<strong>no change</strong>'"));
+    $this->assertText(Html::escape("404: '<em>herp</em>'"));
+    // Added key is escaped.
+    $this->assertText(Html::escape("biff: '<em>bangpow</em>'"));
   }
 
   /**