fix: inline styles instead of scss

Author: astandrik

src/components/YqlHighlighter/YqlHighlighter.scss

@@ -1,16 +1,10 @@
 import {useThemeValue} from '@gravity-ui/uikit';
 import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
 
-import {cn} from '../../utils/cn';
-
 import {dark, light, yql} from './yql';
 
-import './YqlHighlighter.scss';
-
 SyntaxHighlighter.registerLanguage('yql', yql);
 
-const b = cn('yql-highlighter');
-
 interface YqlHighlighterProps {
     children: string;
     className?: string;
@@ -21,7 +15,7 @@ export const YqlHighlighter = ({children, className}: YqlHighlighterProps) => {
     const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
 
     return (
-        <div className={b(null, className)}>
+        <div className={className}>
             <SyntaxHighlighter language="yql" style={isDark ? dark : light}>
                 {children}
             </SyntaxHighlighter>

src/components/YqlHighlighter/YqlHighlighter.tsx

@@ -13,11 +13,13 @@ export const light = {
     'pre[class*="language-"]': {
         ...lightTheme['pre[class*="language-"]'],
         background: 'transparent',
+        margin: 0,
     },
     'code[class*="language-"]': {
         ...lightTheme['code[class*="language-"]'],
         background: 'transparent',
         color: 'var(--g-color-text-primary)',
+        whiteSpace: 'pre-wrap' as const,
     },
     comment: {
         color: '#969896',
@@ -53,11 +55,13 @@ export const dark = {
     'pre[class*="language-"]': {
         ...darkTheme['pre[class*="language-"]'],
         background: 'transparent',
+        margin: 0,
     },
     'code[class*="language-"]': {
         ...darkTheme['code[class*="language-"]'],
         background: 'transparent',
         color: 'var(--g-color-text-primary)',
+        whiteSpace: 'pre-wrap' as const,
     },
     comment: {
         color: '#969896',