Skip to content
Syntax highlighting using CodeMirror with the "material-palenight" theme.Line numbers displayed in the code editor.Code wrapping toggle button to enable/disable line wrapping.Copy code button to copy the entire code to the clipboard.Expand/collapse button to toggle the code editor's height.Adjustable font size using a range input.Dark/light theme toggle button to switch between themes.Raw code view button to open the code in a new window.Mobile-friendly and responsive design using media queries.Accessible buttons with appropriate titles and icons.Share button to copy the snippet URL to the clipboard.Report abuse button to allow users to report inappropriate content.
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,
lineWrapping: false
});
$("#copy-code").click(function() {
editor.execCommand("selectAll");
document.execCommand("copy");
});
$("#toggle-wrap").click(function() {
editor.setOption("lineWrapping", !editor.getOption("lineWrapping"));
});
$("#toggle-theme").click(function() {
var currentTheme = editor.getOption("theme");
var newTheme = currentTheme === "material-palenight" ? "default" : "material-palenight";
editor.setOption("theme", newTheme);
});
$("#toggle-expand").click(function() {
$(".CodeMirror").toggleClass("expanded");
});
$("#view-raw").click(function() {
var rawCode = editor.getValue();
var rawCodeWindow = window.open("", "_blank");
rawCodeWindow.document.write("<pre>" + rawCode + "</pre>");
rawCodeWindow.document.close();
});
$("#font-size").on("input", function() {
var fontSize = $(this).val() + "px";
$(".CodeMirror").css("font-size", fontSize);
});
$("#share-snippet").click(function() {
var snippetUrl = window.location.href;
navigator.clipboard.writeText(snippetUrl);
alert("Snippet URL copied to clipboard!");
});
$("#report-abuse").click(function() {
var confirmReport = confirm("Are you sure you want to report this snippet for abuse?");
if (confirmReport) {
// Implement report abuse functionality here
alert("Snippet reported. Thank you for your feedback!");
}
});
});
The modifications include:
Please note that some functionality, such as reporting abuse, may require additional server-side implementation.
There is something wrong with it!
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.