diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 8f60ae886c..3a5d35a561 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Highlight from '../views/elements/Highlight';
+import SyntaxHighlight from '../views/elements/SyntaxHighlight';
 
 
 module.exports = React.createClass({
@@ -48,9 +48,9 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_ViewSource">
-                <Highlight className="json">
+                <SyntaxHighlight className="json">
                     { JSON.stringify(this.props.content, null, 2) }
-                </Highlight>
+                </SyntaxHighlight>
             </div>
         );
     }
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 1b2af377c3..1d8f616c07 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from 'matrix-react-sdk';
-import Highlight from '../elements/Highlight';
+import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
 
@@ -344,9 +344,9 @@ class RoomStateExplorer extends DevtoolsComponent {
 
             return <div className="mx_ViewSource">
                 <div className="mx_Dialog_content">
-                    <Highlight className="json">
+                    <SyntaxHighlight className="json">
                         { JSON.stringify(this.state.event.event, null, 2) }
-                    </Highlight>
+                    </SyntaxHighlight>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -462,9 +462,9 @@ class AccountDataExplorer extends DevtoolsComponent {
 
             return <div className="mx_ViewSource">
                 <div className="mx_Dialog_content">
-                    <Highlight className="json">
+                    <SyntaxHighlight className="json">
                         { JSON.stringify(this.state.event.event, null, 2) }
-                    </Highlight>
+                    </SyntaxHighlight>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onBack}>{ _t('Back') }</button>
diff --git a/src/components/views/elements/Highlight.js b/src/components/views/elements/SyntaxHighlight.js
similarity index 89%
rename from src/components/views/elements/Highlight.js
rename to src/components/views/elements/SyntaxHighlight.js
index 8706bb05a5..a7d8f894f4 100644
--- a/src/components/views/elements/Highlight.js
+++ b/src/components/views/elements/SyntaxHighlight.js
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {highlightBlock} from 'highlight.js';
 
-export default class Highlight extends React.Component {
+export default class SyntaxHighlight extends React.Component {
     static propTypes = {
         className: PropTypes.string,
         children: PropTypes.node,
@@ -42,7 +42,7 @@ export default class Highlight extends React.Component {
     render() {
         const { className, children } = this.props;
 
-        return <pre className={`${className} mx_Highlight`} ref={this._ref}>
+        return <pre className={`${className} mx_SyntaxHighlight`} ref={this._ref}>
             <code>{ children }</code>
         </pre>;
     }
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 8ac6627005..a3783786cd 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -93,7 +93,7 @@
 @import "./vector-web/views/dialogs/_SetEmailDialog.scss";
 @import "./vector-web/views/dialogs/_SetPasswordDialog.scss";
 @import "./vector-web/views/directory/_NetworkDropdown.scss";
-@import "./vector-web/views/elements/_Highlight.scss";
+@import "./vector-web/views/elements/_SyntaxHighlight.scss";
 @import "./vector-web/views/elements/_ImageView.scss";
 @import "./vector-web/views/elements/_InlineSpinner.scss";
 @import "./vector-web/views/elements/_Spinner.scss";
diff --git a/src/skins/vector/css/vector-web/views/elements/_Highlight.scss b/src/skins/vector/css/vector-web/views/elements/_SyntaxHighlight.scss
similarity index 96%
rename from src/skins/vector/css/vector-web/views/elements/_Highlight.scss
rename to src/skins/vector/css/vector-web/views/elements/_SyntaxHighlight.scss
index 9b35844ffa..e97401a160 100644
--- a/src/skins/vector/css/vector-web/views/elements/_Highlight.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_SyntaxHighlight.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_Highlight {
+.mx_SyntaxHighlight {
     /* inhibit hljs styling */
     background: none !important;
     color: $light-fg-color !important;