AOelen · semantic-release-bot · 6d181d45 · 6d181d45 · 6d181d45 · 6d181d45
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
+# [1.23.0](https://gitlab.com/TIBHannover/orkg/orkg-ask/frontend/compare/v1.22.0...v1.23.0) (2024-08-29)
+
+
+### Features
+
+* use syntax highlighter for displaying code ([8695e14](https://gitlab.com/TIBHannover/orkg/orkg-ask/frontend/commit/8695e14a973f03ece14c479cbcd8800ba9c189e7))
+
 # [1.22.0](https://gitlab.com/TIBHannover/orkg/orkg-ask/frontend/compare/v1.21.0...v1.22.0) (2024-08-29)



--- a/messages/en.json
+++ b/messages/en.json
@@ -688,5 +688,6 @@
  "tame_civil_hyena_stir": "Export",
  "alert_away_grizzly_bask": "Cite",
  "male_male_mayfly_beam": "Export",
-  "slimy_hour_hedgehog_drop": "Export"
+  "slimy_hour_hedgehog_drop": "Export",
+  "hour_pretty_parakeet_kiss": "Loading..."
 }
--- a/package-lock.json
+++ b/package-lock.json
 {
  "name": "orkg-ask",
-  "version": "1.22.0",
+  "version": "1.23.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "orkg-ask",
-      "version": "1.22.0",
+      "version": "1.23.0",
      "dependencies": {
        "@dnd-kit/core": "^6.1.0",
        "@dnd-kit/sortable": "^8.0.0",
@@ -44,6 +44,7 @@
        "react-share": "^5.1.0",
        "react-slick": "^0.30.2",
        "react-string-replace": "^1.1.1",
+        "react-syntax-highlighter": "^15.5.0",
        "react-use": "^17.5.0",
        "sharp": "^0.33.3",
        "slick-carousel": "^1.8.1",
@@ -70,6 +71,7 @@
        "@types/react-dom": "^18",
        "@types/react-scroll-sync": "^0.9.0",
        "@types/react-slick": "^0.23.13",
+        "@types/react-syntax-highlighter": "^15.5.13",
        "@types/uuid": "^9.0.8",
        "@typescript-eslint/eslint-plugin": "^6.18.1",
        "@typescript-eslint/parser": "^6.18.1",
@@ -6449,6 +6451,15 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react-transition-group": {
      "version": "4.4.10",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -10073,6 +10084,18 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/fetch-ponyfill": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/fetch-ponyfill/-/fetch-ponyfill-7.1.0.tgz",
@@ -10318,6 +10341,14 @@
        "node": ">= 18"
      }
    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
    "node_modules/formdata-node": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-6.0.3.tgz",
@@ -11018,6 +11049,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/hast-util-to-jsx-runtime": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
@@ -11056,11 +11096,69 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/hastscript/node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hastscript/node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hastscript/node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/highlight.js": {
      "version": "10.7.3",
      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true,
      "engines": {
        "node": "*"
      }
@@ -12973,6 +13071,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -18092,6 +18203,14 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -18496,6 +18615,21 @@
        }
      }
    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
    "node_modules/react-textarea-autosize": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
@@ -18721,6 +18855,112 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
@@ -21820,7 +22060,6 @@
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.4"
      }

--- a/package.json
+++ b/package.json
 {
  "name": "orkg-ask",
-  "version": "1.22.0",
+  "version": "1.23.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev --turbo",
@@ -54,6 +54,7 @@
    "react-share": "^5.1.0",
    "react-slick": "^0.30.2",
    "react-string-replace": "^1.1.1",
+    "react-syntax-highlighter": "^15.5.0",
    "react-use": "^17.5.0",
    "sharp": "^0.33.3",
    "slick-carousel": "^1.8.1",
@@ -80,6 +81,7 @@
    "@types/react-dom": "^18",
    "@types/react-scroll-sync": "^0.9.0",
    "@types/react-slick": "^0.23.13",
+    "@types/react-syntax-highlighter": "^15.5.13",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^6.18.1",
    "@typescript-eslint/parser": "^6.18.1",

--- a/src/components/CiteModal/CiteModal.tsx
+++ b/src/components/CiteModal/CiteModal.tsx
@@ -11,6 +11,7 @@ import { useEffect, useState, useTransition } from 'react';

 import generateCitation from '@/components/CiteModal/actions/actions';
 import FORMATS from '@/components/CiteModal/constants/formats';
+import CodeHighlighter from '@/components/CodeHighlighter/CodeHighlighter';
 import CopyToClipboard from '@/components/CopyToClipboard/CopyToClipboard';
 import DownloadAsFile from '@/components/DownloadAsFile/DownloadAsFile';
 import Modal from '@/components/NextUi/Modal/Modal';
@@ -58,6 +59,17 @@ export default function CiteModal({ onOpenChange, items }: CiteModalProps) {
      'csl-json': 'application/json',
    }[type] ?? '';

+  const language =
+    (
+      {
+        bibtex: 'latex',
+        ris: 'plaintext',
+        'csl-json': 'json',
+      } as const
+    )[type] ?? ('plaintext' as const);
+
+  const isCode = type === 'bibtex' || type === 'ris' || type === 'csl-json';
+
  return (
    <Modal isOpen onOpenChange={onOpenChange} size="lg">
      <ModalContent>
@@ -82,7 +94,7 @@ export default function CiteModal({ onOpenChange, items }: CiteModalProps) {
          </Select>
          <div>
            <div className="mt-2 mb-1 mr-1 flex justify-end items-center">
-              {(type === 'bibtex' || type === 'ris' || type === 'csl-json') && (
+              {isCode && (
                <DownloadAsFile
                  content={content}
                  mimeType={mimeType}
@@ -91,14 +103,18 @@ export default function CiteModal({ onOpenChange, items }: CiteModalProps) {
              )}
              <CopyToClipboard text={content} />
            </div>
-            <Textarea
-              className="mb-3"
-              value={content}
-              isDisabled={isLoading}
-              onClick={(e) => e.currentTarget.select()}
-              isReadOnly
-              maxRows={30}
-            />
+            {isCode ? (
+              <CodeHighlighter code={content} language={language} />
+            ) : (
+              <Textarea
+                className="mb-3"
+                value={content}
+                isDisabled={isLoading}
+                onClick={(e) => e.currentTarget.select()}
+                isReadOnly
+                maxRows={30}
+              />
+            )}
          </div>
        </ModalBody>
      </ModalContent>

--- a/src/components/CodeHighlighter/CodeHighlighter.tsx
+++ b/src/components/CodeHighlighter/CodeHighlighter.tsx
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import excel from 'react-syntax-highlighter/dist/cjs/languages/hljs/excel';
+import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
+import latex from 'react-syntax-highlighter/dist/cjs/languages/hljs/latex';
+import plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext';
+import { a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+type CodeHighlighterProps = {
+  code: string;
+  language: 'latex' | 'excel' | 'plaintext' | 'json';
+};
+
+export default function CodeHighlighter({
+  code,
+  language,
+}: CodeHighlighterProps) {
+  SyntaxHighlighter.registerLanguage('excel', excel);
+  SyntaxHighlighter.registerLanguage('latex', latex);
+  SyntaxHighlighter.registerLanguage('plaintext', plaintext);
+  SyntaxHighlighter.registerLanguage('json', json);
+
+  return (
+    <SyntaxHighlighter
+      language={language}
+      style={a11yLight}
+      showLineNumbers
+      className="!bg-secondary-50 !border-1 !border-secondary-200 rounded-3xl text-sm mb-2 max-h-[450px]"
+    >
+      {code}
+    </SyntaxHighlighter>
+  );
+}
--- a/src/components/ExportModal/ExportCsv.tsx
+++ b/src/components/ExportModal/ExportCsv.tsx
@@ -6,9 +6,9 @@ import { useContext, useEffect, useMemo, useState } from 'react';
 import CsvDownloader, { toCsv } from 'react-csv-downloader';

 import { columnsParser } from '@/app/[locale]/search/searchParams/searchParamsParsers';
+import CodeHighlighter from '@/components/CodeHighlighter/CodeHighlighter';
 import CopyToClipboard from '@/components/CopyToClipboard/CopyToClipboard';
 import useCsvExport from '@/components/ExportModal/hooks/useCsvExport';
-import Textarea from '@/components/NextUi/Textarea/Textarea';
 import tableDataContext from '@/components/TableDataProvider/tableDataContext';
 import { IData } from '@/types/csl-json';

@@ -84,26 +84,23 @@ export default function ExportCsv({ selectedItems }: ExportLatexModalProps) {

  return (
    <>
-      <div className="mb-1 mr-1 flex justify-end items-center">
-        <CsvDownloader
-          filename="orkg-ask-export.csv"
-          columns={columnsCsv}
-          wrapColumnChar='"'
-          datas={csvData}
-          className="inline-flex items-center justify-center gap-2 rounded-small py-0 px-2 h-auto data-[hover=true]:bg-transparent text-primary hover:underline min-w-0 text-sm" // apply same style as LinkButton
-        >
-          <FontAwesomeIcon icon={faDownload} /> {t('noisy_royal_jurgen_aim')}
-        </CsvDownloader>
-        <CopyToClipboard text={csvText} />
+      <div className="mb-1 mx-1 flex justify-between items-center">
+        {/* eslint-disable-next-line react/jsx-no-literals */}
+        <span className="font-bold">CSV</span>
+        <div className="flex items-center">
+          <CsvDownloader
+            filename="orkg-ask-export.csv"
+            columns={columnsCsv}
+            wrapColumnChar='"'
+            datas={csvData}
+            className="inline-flex items-center justify-center gap-2 rounded-small py-0 px-2 h-auto data-[hover=true]:bg-transparent text-primary hover:underline min-w-0 text-sm" // apply same style as LinkButton
+          >
+            <FontAwesomeIcon icon={faDownload} /> {t('noisy_royal_jurgen_aim')}
+          </CsvDownloader>
+          <CopyToClipboard text={csvText} />
+        </div>
      </div>
-      <Textarea
-        label="CSV"
-        minRows={10}
-        maxRows={15}
-        value={csvText}
-        className="mb-2"
-        onClick={(e) => e.currentTarget.select()}
-      />
+      {csvText && <CodeHighlighter code={csvText} language="excel" />}
    </>
  );
 }
--- a/src/components/ExportModal/ExportLatex.tsx
+++ b/src/components/ExportModal/ExportLatex.tsx
@@ -5,11 +5,11 @@ import { useContext, useEffect, useMemo, useState, useTransition } from 'react';
 import { columnsParser } from '@/app/[locale]/search/searchParams/searchParamsParsers';
 import Alert from '@/components/Alert/Alert';
 import generateCitation from '@/components/CiteModal/actions/actions';
+import CodeHighlighter from '@/components/CodeHighlighter/CodeHighlighter';
 import CopyToClipboard from '@/components/CopyToClipboard/CopyToClipboard';
 import DownloadAsFile from '@/components/DownloadAsFile/DownloadAsFile';
 import useCsvExport from '@/components/ExportModal/hooks/useCsvExport';
 import useLatexExport from '@/components/ExportModal/hooks/useLatexExport';
-import Textarea from '@/components/NextUi/Textarea/Textarea';
 import tableDataContext from '@/components/TableDataProvider/tableDataContext';
 import { IData } from '@/types/csl-json';

@@ -75,36 +75,39 @@ export default function ExportLatex({ selectedItems }: ExportLatexProps) {
      >
        {t('antsy_last_deer_learn')}
      </Alert>
-      <div className="mb-1 mr-1 flex justify-end items-center">
-        <DownloadAsFile
-          content={latex}
-          mimeType="application/x-tex"
-          fileName="export.tex"
-        />
-        <CopyToClipboard text={latex} />
+      <div className="mb-1 mx-1 flex justify-between items-center">
+        {/* eslint-disable-next-line react/jsx-no-literals */}
+        <span className="font-bold">LaTeX</span>
+        <div className="flex items-center">
+          <DownloadAsFile
+            content={latex}
+            mimeType="application/x-tex"
+            fileName="export.tex"
+          />
+          <CopyToClipboard text={latex} />
+        </div>
      </div>
-      <Textarea
-        label="LaTeX"
-        minRows={10}
-        maxRows={15}
-        value={!isLoading ? latex : t('topical_few_butterfly_sprout')}
-        onClick={(e) => e.currentTarget.select()}
+
+      <CodeHighlighter
+        code={!isLoading ? latex : t('hour_pretty_parakeet_kiss')}
+        language="latex"
      />
-      <div className="mt-2 mb-1 mr-1 flex justify-end items-center">
-        <DownloadAsFile
-          content={bibtex}
-          mimeType="application/x-bibtex"
-          fileName="export.bib"
-        />
-        <CopyToClipboard text={bibtex} />
+
+      <div className="mt-2 mb-1 mx-1 flex justify-between items-center">
+        {/* eslint-disable-next-line react/jsx-no-literals */}
+        <span className="font-bold">BibTeX</span>
+        <div className="flex items-center">
+          <DownloadAsFile
+            content={bibtex}
+            mimeType="application/x-bibtex"
+            fileName="export.bib"
+          />
+          <CopyToClipboard text={bibtex} />
+        </div>
      </div>
-      <Textarea
-        label={t('sharp_polite_crab_mend')}
-        minRows={10}
-        maxRows={15}
-        value={!isLoading ? bibtex : t('topical_few_butterfly_sprout')}
-        className="mb-2"
-        onClick={(e) => e.currentTarget.select()}
+      <CodeHighlighter
+        code={!isLoading ? bibtex : t('hour_pretty_parakeet_kiss')}
+        language="latex"
      />
    </>
  );