feat: article demo
This commit is contained in:
parent
5e43af637e
commit
c0e6937e40
5 changed files with 108 additions and 16 deletions
85
gruvbox-light.css
Normal file
85
gruvbox-light.css
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
/* Gruvbox Material Light theme for Highlight.js */
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: #fbf1c7; /* Gruvbox Material Light bg */
|
||||
color: #3c3836; /* Gruvbox Material Light fg */
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: #928374; /* Gruvbox Material Light comment */
|
||||
}
|
||||
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
color: #3c3836;
|
||||
}
|
||||
|
||||
.hljs-tag .hljs-attr,
|
||||
.hljs-tag .hljs-name,
|
||||
.hljs-attribute,
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag {
|
||||
color: #d79921; /* Gruvbox Material Light orange */
|
||||
}
|
||||
|
||||
.hljs-deletion,
|
||||
.hljs-number,
|
||||
.hljs-quote,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id,
|
||||
.hljs-string,
|
||||
.hljs-template-tag,
|
||||
.hljs-type {
|
||||
color: #cc241d; /* Gruvbox Material Light red */
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-title {
|
||||
color: #689d6a; /* Gruvbox Material Light green */
|
||||
}
|
||||
|
||||
.hljs-link,
|
||||
.hljs-operator,
|
||||
.hljs-regexp,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-symbol,
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #689d6a; /* Gruvbox Material Light green */
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #d3869b; /* Gruvbox Material Light pink */
|
||||
}
|
||||
|
||||
.hljs-addition,
|
||||
.hljs-built_in,
|
||||
.hljs-bullet,
|
||||
.hljs-code {
|
||||
color: #98971a; /* Gruvbox Material Light yellow */
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #689d6a; /* Gruvbox Material Light green */
|
||||
}
|
||||
|
||||
.hljs-meta .hljs-string {
|
||||
color: #b8bb26; /* Gruvbox Material Light green */
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<title>Barrett Ruth</title>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
3
problems.css
Normal file
3
problems.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
pre code.hljs {
|
||||
background: #f9f5d7;
|
||||
}
|
||||
|
|
@ -4,25 +4,27 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="gruvbox-light.css" />
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<link rel="stylesheet" href="problems.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
|
||||
<title>Problems - Sliding Window</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Trapping the Rainwaters</h1>
|
||||
<p>Trapping Raintwaters Leetcode Problem Description</p>
|
||||
<p>
|
||||
Example: Finding the maximum sum subarray of a fixed size.
|
||||
</p>
|
||||
<pre class="sliding-window-algorithm">
|
||||
</pre>
|
||||
<h1>Trapping the Rainwaters</h1>
|
||||
<p>Trapping Raintwaters Leetcode Problem Description</p>
|
||||
<p>Example: Finding the maximum sum subarray of a fixed size.</p>
|
||||
<pre><code></code></pre>
|
||||
<h2>Topic Relevance</h2>
|
||||
<p>
|
||||
The sliding window algorithm is widely used in software development for solving optimization problems, especially when dealing with arrays or lists. It's useful in scenarios where you need to track a subset of data within a larger dataset efficiently, making it a crucial tool in fields like data analysis, machine learning, and others.
|
||||
The sliding window algorithm is widely used in software development for
|
||||
solving optimization problems, especially when dealing with arrays or
|
||||
lists. It's useful in scenarios where you need to track a subset of data
|
||||
within a larger dataset efficiently, making it a crucial tool in fields
|
||||
like data analysis, machine learning, and others.
|
||||
</p>
|
||||
</body>
|
||||
<script>
|
||||
document.querySelector('.sliding-window-algorithm').innerText =
|
||||
String.raw`
|
||||
<script>
|
||||
document.querySelector("code").textContent = `
|
||||
int trap(vector<int>& height) {
|
||||
auto l = height.begin(), r = height.end() - 1;
|
||||
int level = 0, water = 0;
|
||||
|
|
@ -33,6 +35,8 @@ int trap(vector<int>& height) {
|
|||
}
|
||||
return water;
|
||||
}
|
||||
`
|
||||
</script>
|
||||
`;
|
||||
hljs.highlightAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue