add compare code

ac9a8eac · Sarun Mungthanya · 7aa8d437 · ac9a8eac · ac9a8eac · ac9a8eac
Commit ac9a8eac authored Jul 08, 2024 by Sarun Mungthanya
--- a/app/Http/Livewire/CodeComparer.php
+++ b/app/Http/Livewire/CodeComparer.php
+<?php
+namespace App\Http\Livewire;
+use Livewire\Component;
+use GuzzleHttp\Client;
+use GuzzleHttp\Exception\RequestException;
+use Jfcherng\Diff\Differ;
+use Jfcherng\Diff\DiffHelper;
+use Jfcherng\Diff\Factory\RendererFactory;
+use Jfcherng\Diff\Renderer\RendererConstant;
+use Jfcherng\Diff\Renderer\Html\Inline;
+class CodeComparer extends Component
+{
+    public $code;
+    public $gitCode;
+    public $gitCodeRaw;
+    public $comparisonResult;
+    public $diffResult;
+    public function mount()
+    {
+        $this->code = '';
+        $this->gitCodeRaw = $this->getCodeFromGit();
+        $this->gitCode = (iconv('TIS-620', 'UTF-8', $this->gitCodeRaw));
+        $this->diffResult = '';
+    }
+    public function compare()
+    {
+        try {
+            $this->gitCodeRaw = $this->getCodeFromGit();
+            $this->gitCode = (iconv('TIS-620', 'UTF-8', $this->gitCodeRaw));
+            $this->comparisonResult = 'GitLab connection successful.';
+            $this->diffResult = $this->getDiff($this->gitCode, $this->code);
+            // dd($this->diffResult);
+            $this->emit('diffResultUpdated');
+        } catch (RequestException $e) {
+            $this->comparisonResult = 'Error connecting to GitLab: ' . $e->getMessage();
+            $this->gitCode = '';
+            $this->gitCodeRaw = '';
+        }
+    }
+    public function getDiff($code1, $code2)
+    {
+        $diffOptions = [
+            'context' => 0,
+            'ignoreCase' => false,
+            'ignoreWhitespace' => true,
+        ];
+        $rendererOptions = [
+            'detailLevel' => 'char',
+            'language' => 'eng',
+            'lineNumbers' => true,
+            'separateBlock' => true,
+            'showHeader' => true,
+            'spacesToNbsp' => false,
+            'outputFormat' => 'inline',
+            'mergeThreshold' => 0.8,
+            'originalFileName' => 'Original',
+            'newFileName' => 'New',
+            'cliColorization' => 'none',
+        ];
+        $differ = new Differ(explode("\n", $code1), explode("\n", $code2), $diffOptions);
+        $renderer = RendererFactory::make('Inline', $rendererOptions);
+        $result = $renderer->render($differ);
+        $result = $this->convertDiffToPrismFormat($result);
+        return $result;
+    }
+    private function convertDiffToPrismFormat($diffHtml)
+    {
+        $diffHtml = str_replace('<tr data-type="-"', '<tr class="token deleted"', $diffHtml);
+        $diffHtml = str_replace('<tr data-type="+"', '<tr class="token inserted"', $diffHtml);
+        $diffHtml = str_replace('<td class="old">', '<td class="token deleted">', $diffHtml);
+        $diffHtml = str_replace('<td class="new">', '<td class="token inserted">', $diffHtml);
+        $diffHtml = str_replace('<th class="sign del">-</th>', '', $diffHtml);
+        $diffHtml = str_replace('<th class="sign ins">+</th>', '', $diffHtml);
+        return $diffHtml;
+    }
+    public function getCodeFromGit()
+    {
+        $projectId = 60; // ใช้ Project ID ที่ถูกต้อง
+        $filePath = 'IE5DEV.shippingnet/USERFUNC.inc'; // เส้นทางไฟล์ที่ถูกต้อง
+        $branch = 'master'; // หรือ branch ที่คุณต้องการ
+        $token = 'glpat-JUEx89aC_VcFPRiSeJh_';
+        $client = new Client([
+            'base_uri' => 'https://idemo.netbay.co.th/gitlab/api/v4/',
+            'headers' => [
+                'Authorization' => "Bearer $token",
+                'Accept' => 'application/json',
+            ],
+            'verify' => false,
+        ]);
+        try {
+            $response = $client->get("projects/$projectId/repository/files/" . urlencode($filePath) . "/raw", [
+                'query' => ['ref' => $branch]
+            ]);
+            $statusCode = $response->getStatusCode();
+            $content = $response->getBody()->getContents();
+            if ($statusCode == 200) {
+                return $content;
+            } else {
+                throw new \Exception("Failed to fetch file. Status code: $statusCode");
+            }
+        } catch (RequestException $e) {
+            $this->comparisonResult = 'RequestException: ' . $e->getMessage();
+            throw $e;
+        } catch (\Exception $e) {
+            $this->comparisonResult = 'Exception: ' . $e->getMessage();
+            throw $e;
+        }
+    }
+    public function render()
+    {
+        return view('livewire.code-comparer');
+    }
+}
--- a/app/Http/Livewire/MainContainer.php
+++ b/app/Http/Livewire/MainContainer.php
@@ -6,7 +6,7 @@ use Livewire\Component;
 class MainContainer extends Component
 {
-    public $currentContent = 'SendPatch';
+    public $currentContent = '';
    public $loading = false;
    protected $listeners = ['menuChanged' => 'loadContent'];

--- a/app/Http/Livewire/Pages/SendPatch/SendPatchEdit.php
+++ b/app/Http/Livewire/Pages/SendPatch/SendPatchEdit.php
@@ -25,7 +25,7 @@ class SendPatchEdit extends Component
    {
        // $this->PID = $editPid;
        $this->PID = 15670;
-        $this->updateServerLists();
+        // $this->updateServerLists();
    }
    public function updatedSelectedOwnerType($value)

--- a/bootstrap/cache/livewire-components.php
+++ b/bootstrap/cache/livewire-components.php
 <?php return array (
+  'code-comparer' => 'App\\Http\\Livewire\\CodeComparer',
  'delete-modal' => 'App\\Http\\Livewire\\DeleteModal',
  'main-container' => 'App\\Http\\Livewire\\MainContainer',
  'navbar' => 'App\\Http\\Livewire\\Navbar',

--- a/composer.json
+++ b/composer.json
@@ -6,7 +6,9 @@
    "license": "MIT",
    "require": {
        "php": "^8.2",
-        "guzzlehttp/guzzle": "^7.2",
+        "czproject/git-php": "^4.2",
+        "guzzlehttp/guzzle": "^7.8",
+        "jfcherng/php-diff": "^6.16",
        "laravel/framework": "^9.5",
        "laravel/sanctum": "^3.0",
        "laravel/tinker": "^2.7",

--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
        "gridjs": "^6.0.6",
        "highlight.js": "^11.7.0",
        "jquery": "^3.7.1",
+        "prismjs": "^1.29.0",
        "quill": "^1.3.7",
        "simplebar": "^6.2.1",
        "sortablejs": "^1.15.0",

--- a/public/js/prism-line-numbers.js
+++ b/public/js/prism-line-numbers.js
+(function () {
+	if (typeof Prism === 'undefined' || typeof document === 'undefined') {
+		return;
+	}
+	/**
+	 * Plugin name which is used as a class name for <pre> which is activating the plugin
+	 *
+	 * @type {string}
+	 */
+	var PLUGIN_NAME = 'line-numbers';
+	/**
+	 * Regular expression used for determining line breaks
+	 *
+	 * @type {RegExp}
+	 */
+	var NEW_LINE_EXP = /\n(?!$)/g;
+	/**
+	 * Global exports
+	 */
+	var config = Prism.plugins.lineNumbers = {
+		/**
+		 * Get node for provided line number
+		 *
+		 * @param {Element} element pre element
+		 * @param {number} number line number
+		 * @returns {Element|undefined}
+		 */
+		getLine: function (element, number) {
+			if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {
+				return;
+			}
+			var lineNumberRows = element.querySelector('.line-numbers-rows');
+			if (!lineNumberRows) {
+				return;
+			}
+			var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
+			var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);
+			if (number < lineNumberStart) {
+				number = lineNumberStart;
+			}
+			if (number > lineNumberEnd) {
+				number = lineNumberEnd;
+			}
+			var lineIndex = number - lineNumberStart;
+			return lineNumberRows.children[lineIndex];
+		},
+		/**
+		 * Resizes the line numbers of the given element.
+		 *
+		 * This function will not add line numbers. It will only resize existing ones.
+		 *
+		 * @param {HTMLElement} element A `<pre>` element with line numbers.
+		 * @returns {void}
+		 */
+		resize: function (element) {
+			resizeElements([element]);
+		},
+		/**
+		 * Whether the plugin can assume that the units font sizes and margins are not depended on the size of
+		 * the current viewport.
+		 *
+		 * Setting this to `true` will allow the plugin to do certain optimizations for better performance.
+		 *
+		 * Set this to `false` if you use any of the following CSS units: `vh`, `vw`, `vmin`, `vmax`.
+		 *
+		 * @type {boolean}
+		 */
+		assumeViewportIndependence: true
+	};
+	/**
+	 * Resizes the given elements.
+	 *
+	 * @param {HTMLElement[]} elements
+	 */
+	function resizeElements(elements) {
+		elements = elements.filter(function (e) {
+			var codeStyles = getStyles(e);
+			var whiteSpace = codeStyles['white-space'];
+			return whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line';
+		});
+		if (elements.length == 0) {
+			return;
+		}
+		var infos = elements.map(function (element) {
+			var codeElement = element.querySelector('code');
+			var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
+			if (!codeElement || !lineNumbersWrapper) {
+				return undefined;
+			}
+			/** @type {HTMLElement} */
+			var lineNumberSizer = element.querySelector('.line-numbers-sizer');
+			var codeLines = codeElement.textContent.split(NEW_LINE_EXP);
+			if (!lineNumberSizer) {
+				lineNumberSizer = document.createElement('span');
+				lineNumberSizer.className = 'line-numbers-sizer';
+				codeElement.appendChild(lineNumberSizer);
+			}
+			lineNumberSizer.innerHTML = '0';
+			lineNumberSizer.style.display = 'block';
+			var oneLinerHeight = lineNumberSizer.getBoundingClientRect().height;
+			lineNumberSizer.innerHTML = '';
+			return {
+				element: element,
+				lines: codeLines,
+				lineHeights: [],
+				oneLinerHeight: oneLinerHeight,
+				sizer: lineNumberSizer,
+			};
+		}).filter(Boolean);
+		infos.forEach(function (info) {
+			var lineNumberSizer = info.sizer;
+			var lines = info.lines;
+			var lineHeights = info.lineHeights;
+			var oneLinerHeight = info.oneLinerHeight;
+			lineHeights[lines.length - 1] = undefined;
+			lines.forEach(function (line, index) {
+				if (line && line.length > 1) {
+					var e = lineNumberSizer.appendChild(document.createElement('span'));
+					e.style.display = 'block';
+					e.textContent = line;
+				} else {
+					lineHeights[index] = oneLinerHeight;
+				}
+			});
+		});
+		infos.forEach(function (info) {
+			var lineNumberSizer = info.sizer;
+			var lineHeights = info.lineHeights;
+			var childIndex = 0;
+			for (var i = 0; i < lineHeights.length; i++) {
+				if (lineHeights[i] === undefined) {
+					lineHeights[i] = lineNumberSizer.children[childIndex++].getBoundingClientRect().height;
+				}
+			}
+		});
+		infos.forEach(function (info) {
+			var lineNumberSizer = info.sizer;
+			var wrapper = info.element.querySelector('.line-numbers-rows');
+			lineNumberSizer.style.display = 'none';
+			lineNumberSizer.innerHTML = '';
+			info.lineHeights.forEach(function (height, lineNumber) {
+				wrapper.children[lineNumber].style.height = height + 'px';
+			});
+		});
+	}
+	/**
+	 * Returns style declarations for the element
+	 *
+	 * @param {Element} element
+	 */
+	function getStyles(element) {
+		if (!element) {
+			return null;
+		}
+		return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
+	}
+	var lastWidth = undefined;
+	window.addEventListener('resize', function () {
+		if (config.assumeViewportIndependence && lastWidth === window.innerWidth) {
+			return;
+		}
+		lastWidth = window.innerWidth;
+		resizeElements(Array.prototype.slice.call(document.querySelectorAll('pre.' + PLUGIN_NAME)));
+	});
+	Prism.hooks.add('complete', function (env) {
+		if (!env.code) {
+			return;
+		}
+		var code = /** @type {Element} */ (env.element);
+		var pre = /** @type {HTMLElement} */ (code.parentNode);
+		// works only for <code> wrapped inside <pre> (not inline)
+		if (!pre || !/pre/i.test(pre.nodeName)) {
+			return;
+		}
+		// Abort if line numbers already exists
+		if (code.querySelector('.line-numbers-rows')) {
+			return;
+		}
+		// only add line numbers if <code> or one of its ancestors has the `line-numbers` class
+		if (!Prism.util.isActive(code, PLUGIN_NAME)) {
+			return;
+		}
+		// Remove the class 'line-numbers' from the <code>
+		code.classList.remove(PLUGIN_NAME);
+		// Add the class 'line-numbers' to the <pre>
+		pre.classList.add(PLUGIN_NAME);
+		var match = env.code.match(NEW_LINE_EXP);
+		var linesNum = match ? match.length + 1 : 1;
+		var lineNumbersWrapper;
+		var lines = new Array(linesNum + 1).join('<span></span>');
+		lineNumbersWrapper = document.createElement('span');
+		lineNumbersWrapper.setAttribute('aria-hidden', 'true');
+		lineNumbersWrapper.className = 'line-numbers-rows';
+		lineNumbersWrapper.innerHTML = lines;
+		if (pre.hasAttribute('data-start')) {
+			pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
+		}
+		env.element.appendChild(lineNumbersWrapper);
+		resizeElements([pre]);
+		Prism.hooks.run('line-numbers', env);
+	});
+	Prism.hooks.add('line-numbers', function (env) {
+		env.plugins = env.plugins || {};
+		env.plugins.lineNumbers = true;
+	});
+}());
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,3 +12,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@500&display=swap');
+/* @import "./components/prism.css";
+@import "./components/prism-line-numbers.css"; */
\ No newline at end of file
--- a/resources/css/components/prism-line-numbers.css
+++ b/resources/css/components/prism-line-numbers.css
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+	.line-numbers-rows > span {
+		display: block;
+		counter-increment: linenumber;
+	}
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
--- a/resources/css/components/prism.css
+++ b/resources/css/components/prism.css
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+armasm+arturo+asciidoc+aspnet+asm6502+asmatmel+autohotkey+autoit+avisynth+avro-idl+awk+bash+basic+batch+bbcode+bbj+bicep+birb+bison+bnf+bqn+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+cilkc+cilkcpp+clojure+cmake+cobol+coffeescript+concurnas+csp+cooklang+coq+crystal+css-extras+csv+cue+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gap+gcode+gdscript+gedcom+gettext+gherkin+git+glsl+gn+linker-script+go+go-module+gradle+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+hoon+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keepalived+keyman+kotlin+kumir+kusto+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+magma+makefile+markdown+markup-templating+mata+matlab+maxscript+mel+mermaid+metafont+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+odin+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plant-uml+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+cshtml+jsx+tsx+reason+regex+rego+renpy+rescript+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+stata+iecst+stylus+supercollider+swift+systemd+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+tremor+turtle+twig+typescript+typoscript+unrealscript+uorazor+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+web-idl+wgsl+wiki+wolfram+wren+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=line-highlight+diff-highlight+treeview */
+code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:after,.line-numbers .line-highlight:before{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,.2)}
+pre.diff-highlight>code .token.deleted:not(.prefix),pre>code.diff-highlight .token.deleted:not(.prefix){background-color:rgba(255,0,0,.1);color:inherit;display:block}pre.diff-highlight>code .token.inserted:not(.prefix),pre>code.diff-highlight .token.inserted:not(.prefix){background-color:rgba(0,255,128,.1);color:inherit;display:block}
+.token.treeview-part .entry-line{position:relative;text-indent:-99em;display:inline-block;vertical-align:top;width:1.2em}.token.treeview-part .entry-line:before,.token.treeview-part .line-h:after{content:"";position:absolute;top:0;left:50%;width:50%;height:100%}.token.treeview-part .line-h:before,.token.treeview-part .line-v:before{border-left:1px solid #ccc}.token.treeview-part .line-v-last:before{height:50%;border-left:1px solid #ccc;border-bottom:1px solid #ccc}.token.treeview-part .line-h:after{height:50%;border-bottom:1px solid #ccc}.token.treeview-part .entry-name{position:relative;display:inline-block;vertical-align:top}.token.treeview-part .entry-name.dotfile{opacity:.5}@font-face{font-family:PrismTreeview;src:url(data:application/font-woff;base64,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) format("woff")}.token.treeview-part .entry-name:before{content:"\ea01";font-family:PrismTreeview;font-size:inherit;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:2.5ex;display:inline-block}.token.treeview-part .entry-name.dir:before{content:"\ea02"}.token.treeview-part .entry-name.ext-bmp:before,.token.treeview-part .entry-name.ext-eps:before,.token.treeview-part .entry-name.ext-gif:before,.token.treeview-part .entry-name.ext-jpe:before,.token.treeview-part .entry-name.ext-jpeg:before,.token.treeview-part .entry-name.ext-jpg:before,.token.treeview-part .entry-name.ext-png:before,.token.treeview-part .entry-name.ext-svg:before,.token.treeview-part .entry-name.ext-tiff:before{content:"\ea03"}.token.treeview-part .entry-name.ext-cfg:before,.token.treeview-part .entry-name.ext-conf:before,.token.treeview-part .entry-name.ext-config:before,.token.treeview-part .entry-name.ext-csv:before,.token.treeview-part .entry-name.ext-ini:before,.token.treeview-part .entry-name.ext-log:before,.token.treeview-part .entry-name.ext-md:before,.token.treeview-part .entry-name.ext-nfo:before,.token.treeview-part .entry-name.ext-txt:before{content:"\ea06"}.token.treeview-part .entry-name.ext-asp:before,.token.treeview-part .entry-name.ext-aspx:before,.token.treeview-part .entry-name.ext-c:before,.token.treeview-part .entry-name.ext-cc:before,.token.treeview-part .entry-name.ext-cpp:before,.token.treeview-part .entry-name.ext-cs:before,.token.treeview-part .entry-name.ext-css:before,.token.treeview-part .entry-name.ext-h:before,.token.treeview-part .entry-name.ext-hh:before,.token.treeview-part .entry-name.ext-htm:before,.token.treeview-part .entry-name.ext-html:before,.token.treeview-part .entry-name.ext-jav:before,.token.treeview-part .entry-name.ext-java:before,.token.treeview-part .entry-name.ext-js:before,.token.treeview-part .entry-name.ext-php:before,.token.treeview-part .entry-name.ext-rb:before,.token.treeview-part .entry-name.ext-xml:before{content:"\ea07"}.token.treeview-part .entry-name.ext-7z:before,.token.treeview-part .entry-name.ext-bz2:before,.token.treeview-part .entry-name.ext-bz:before,.token.treeview-part .entry-name.ext-gz:before,.token.treeview-part .entry-name.ext-rar:before,.token.treeview-part .entry-name.ext-tar:before,.token.treeview-part .entry-name.ext-tgz:before,.token.treeview-part .entry-name.ext-zip:before{content:"\ea08"}.token.treeview-part .entry-name.ext-aac:before,.token.treeview-part .entry-name.ext-au:before,.token.treeview-part .entry-name.ext-cda:before,.token.treeview-part .entry-name.ext-flac:before,.token.treeview-part .entry-name.ext-mp3:before,.token.treeview-part .entry-name.ext-oga:before,.token.treeview-part .entry-name.ext-ogg:before,.token.treeview-part .entry-name.ext-wav:before,.token.treeview-part .entry-name.ext-wma:before{content:"\ea04"}.token.treeview-part .entry-name.ext-avi:before,.token.treeview-part .entry-name.ext-flv:before,.token.treeview-part .entry-name.ext-mkv:before,.token.treeview-part .entry-name.ext-mov:before,.token.treeview-part .entry-name.ext-mp4:before,.token.treeview-part .entry-name.ext-mpeg:before,.token.treeview-part .entry-name.ext-mpg:before,.token.treeview-part .entry-name.ext-ogv:before,.token.treeview-part .entry-name.ext-webm:before{content:"\ea05"}.token.treeview-part .entry-name.ext-pdf:before{content:"\ea09"}.token.treeview-part .entry-name.ext-xls:before,.token.treeview-part .entry-name.ext-xlsx:before{content:"\ea0a"}.token.treeview-part .entry-name.ext-doc:before,.token.treeview-part .entry-name.ext-docm:before,.token.treeview-part .entry-name.ext-docx:before{content:"\ea0c"}.token.treeview-part .entry-name.ext-pps:before,.token.treeview-part .entry-name.ext-ppt:before,.token.treeview-part .entry-name.ext-pptx:before{content:"\ea0b"}
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -27,6 +27,11 @@ import Quill from 'quill/dist/quill.min';
 import flatpickr from 'flatpickr';
 import Tom from 'tom-select/dist/js/tom-select.complete.min';
 import "@fortawesome/fontawesome-free/css/all.css";
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-diff.min.js';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
 // Helper Functions
 import * as helpers from './utils/helpers';
@@ -76,3 +81,20 @@ Alpine.data('usePopper', usePopper);
 Alpine.data('accordionItem', accordionItem);
 Alpine.start();
+document.addEventListener('DOMContentLoaded', (event) => {
+    Prism.highlightAll();
+});
+document.addEventListener('livewire:load', function () {
+    Prism.highlightAll();
+});
+Livewire.hook('message.processed', (message, component) => {
+    Prism.highlightAll();
+});
+window.addEventListener('diffResultUpdated', function () {
+    Prism.highlightAll();
+});
\ No newline at end of file
--- a/resources/views/components/app-layout.blade.php
+++ b/resources/views/components/app-layout.blade.php
@@ -17,7 +17,6 @@
    <!-- CSS & JS Assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -56,7 +55,7 @@
 <body class="h-full">
-    <main class="flex-grow overflow-hidden">
+    <main class="flex-grow overflow-auto">
        {{ $slot }}
        @yield('content')
    </main>

--- a/resources/views/livewire/code-comparer.blade.php
+++ b/resources/views/livewire/code-comparer.blade.php
+<div class="mx-5">
+    <style>
+        code[class*="language-"],
+        pre[class*="language-"] {
+            background: white !important;
+            color: black;
+        }
+        .token.deleted {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+        .token.inserted {
+            background-color: #d4edda;
+            color: #155724;
+        }
+    </style>
+    <div class="flex " x-data="{ gitCode: @entangle('gitCode') }">
+        <div class="w-1/2 p-4">
+            <h3 class="text-lg font-semibold">GitLab Code:</h3>
+            <div class="relative">
+                <div class="overflow-auto h-svh p-2 bg-gray-100 rounded">
+                    <pre class="line-numbers language-markup"><code >{{ $gitCode }}</code></pre>
+                </div>
+            </div>
+        </div>
+        <div class="w-1/2 p-4">
+            <h3 class="text-lg font-semibold">Your Code:</h3>
+            <textarea wire:model.defer="code" rows="20" class="w-full p-2 border rounded language-markup" placeholder="Paste your code here...">
+            </textarea>
+            <button wire:click="compare" id="compare"
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Compare</button>
+        </div>
+    </div>
+    <div class="mx-3">
+        <h3 class="text-lg font-semibold mt-4">Differences:</h3>
+        <div class="overflow-auto  p-2 bg-gray-100 rounded">
+            <pre class="line-numbers "> <code >{!! $diffResult !!}</code></pre>
+        </div>
+    </div>
+</div>
--- a/resources/views/livewire/main-container.blade.php
+++ b/resources/views/livewire/main-container.blade.php
@@ -14,8 +14,6 @@
    @elseif ($currentContent === 'SendPatch')
        <livewire:pages.send-patch.send-patch  />
    @else
-    <div class=" h-fit">
+        @livewire('code-comparer')
-home
-    </div>
    @endif
 </div>
--- a/resources/views/test.blade.php
+++ b/resources/views/test.blade.php
+<x-app-layout title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
+  @php
+      dd("tettt");
+  @endphp
+</x-app-layout>
\ No newline at end of file