diff --git a/public/app/features/expressions/components/SqlExpr.tsx b/public/app/features/expressions/components/SqlExpr.tsx
index 93fad1699b7..e753d42a549 100644
--- a/public/app/features/expressions/components/SqlExpr.tsx
+++ b/public/app/features/expressions/components/SqlExpr.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useMemo, useRef, useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { SQLEditor } from '@grafana/plugin-ui';
+import { SQLEditor, LanguageDefinition } from '@grafana/plugin-ui';
 import { useStyles2 } from '@grafana/ui';
 
 import { ExpressionQuery } from '../types';
@@ -10,6 +10,16 @@ import { ExpressionQuery } from '../types';
 // Account for Monaco editor's border to prevent clipping
 const EDITOR_BORDER_ADJUSTMENT = 2; // 1px border on top and bottom
 
+// Define the language definition for MySQL syntax highlighting and autocomplete
+const EDITOR_LANGUAGE_DEFINITION: LanguageDefinition = {
+  id: 'mysql',
+  // Additional properties could be added here in the future if needed
+  // eg:
+  // completionProvider: to autocomplete field (ie column) names when given
+  // a table name (dataframe reference)
+  // formatter: to format the SQL query and dashboard variables
+};
+
 interface Props {
   refIds: Array<SelectableValue<string>>;
   query: ExpressionQuery;
@@ -51,6 +61,7 @@ export const SqlExpr = ({ onChange, refIds, query }: Props) => {
         query={query.expression || initialQuery}
         onChange={onEditorChange}
         height={dimensions.height - EDITOR_BORDER_ADJUSTMENT}
+        language={EDITOR_LANGUAGE_DEFINITION}
       />
     </div>
   );