Skip to content
Untitled doc
Share
Explore

Untitled page

Here's the modified code with the requested features:
Razor View (*.cshtml):
html
@model CodePad.Web.Models.DTO.SnippetDTO

@{
ViewData["Title"] = Model.Title;
var expirationDate = Model.ExpirationDate.HasValue ? Model.ExpirationDate.Value.ToString("MMMM dd, yyyy") : "Never";
}

@section Styles {
<link rel="stylesheet" href="~/css/CodePad/snippet-styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/theme/material-palenight.min.css">
}

<div class="snippet-container">
<div class="snippet-header">
<div class="snippet-title-and-icon">
<h1 class="snippet-title">@Model.Title</h1>
</div>
<div class="snippet-metadata">
<span class="snippet-metadata-icon" title="@Model.Language">
<i class="fas fa-code" title="Language: @Model.Language"></i>
</span>
<span class="snippet-metadata-icon">
<i class="fas fa-calendar-alt" title="Created on: @Model.CreationDate"></i>
</span>
<span class="snippet-metadata-icon">
<i class="fas fa-hourglass-end" title="Expires at: @expirationDate"></i>
</span>
</div>
</div>
<div class="snippet-content">
<textarea id="code-editor">@Model.Code</textarea>
</div>
<div class="snippet-footer">
<div class="snippet-actions">
<button id="copy-code" class="snippet-action-btn" title="Copy code">
<i class="fas fa-copy"></i>
</button>
<button id="toggle-wrap" class="snippet-action-btn" title="Toggle line wrap">
<i class="fas fa-align-left"></i>
</button>
<button id="toggle-theme" class="snippet-action-btn" title="Toggle theme">
<i class="fas fa-adjust"></i>
</button>
<button id="toggle-expand" class="snippet-action-btn" title="Expand/Collapse">
<i class="fas fa-expand-alt"></i>
</button>
<button id="view-raw" class="snippet-action-btn" title="View raw">
<i class="fas fa-code"></i>
</button>
<button id="share-snippet" class="snippet-action-btn" title="Share">
<i class="fas fa-share-alt"></i>
</button>
<button id="report-abuse" class="snippet-action-btn" title="Report abuse">
<i class="fas fa-exclamation-triangle"></i>
</button>
</div>
<div class="snippet-font-size">
<label for="font-size">Font Size:</label>
<input type="range" id="font-size" min="10" max="30" step="1" value="16">
</div>
<span class="snippet-language">@Model.Language</span>
</div>
</div>

@section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/mode/clike/clike.min.js"></script>
<script src="~/js/CodePad/snippet-scripts.js"></script>
}

CSS (snippet-styles.css):
css
body {
background-color: #f5f5f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.snippet-container {
margin: 20px auto;
max-width: 1200px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 30px;
}

.snippet-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}

.snippet-title {
font-size: 28px;
font-weight: bold;
color: #333333;
margin: 0;
}

.snippet-metadata {
display: flex;
align-items: center;
}

.snippet-metadata-icon {
margin-left: 15px;
color: #888888;
font-size: 18px;
}

.snippet-content {
flex-grow: 1;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.CodeMirror {
height: auto;
font-size: 16px;
line-height: 1.6;
}

.CodeMirror-gutters {
background-color: #282a36;
color: #6272a4;
border: none;
}

.CodeMirror-linenumber {
padding: 0 10px;
}

.snippet-footer {
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}

.snippet-actions {
display: flex;
}

.snippet-action-btn {
background: none;
border: none;
font-size: 18px;
color: #888888;
margin-right: 15px;
cursor: pointer;
}

.snippet-font-size {
display: flex;
align-items: center;
}

.snippet-font-size label {
margin-right: 10px;
}

@media screen and (max-width: 768px) {
.snippet-container {
padding: 20px;
}

.snippet-header {
flex-direction: column;
align-items: flex-start;
}

.snippet-metadata {
margin-top: 15px;
}

.snippet-footer {
flex-direction: column;
align-items: flex-start;
}

.snippet-actions {
margin-bottom: 15px;
}
}

JavaScript (snippet-scripts.js):
javascript
$(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), {
lineNumbers: true,
theme: "material-palenight",
mode: "text/x-csharp",
readOnly: true,
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.