Skip to content

Commit 7200753

Browse files
ouioui199ouioui199
committed
feat: Code display ok
1 parent 3da1c42 commit 7200753

File tree

4 files changed

+1838
-2
lines changed

4 files changed

+1838
-2
lines changed

‎blog/articles/Pytorch.html

+54-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
<link rel="icon" href="../../images/img0.png" type="image/png">
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1010
<script src="../../js/main.js" defer></script>
11+
12+
<!-- <link rel="stylesheet" href="../../css/prism-line-numbers.css"> -->
13+
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.css" rel="stylesheet" /> -->
14+
<link rel="stylesheet" href="../../css/prism.css">
15+
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css"> -->
1116
</head>
1217
<body>
1318
<header class="header">
@@ -54,12 +59,36 @@ <h3>Introduction</h3>
5459
Developed by Meta’s <a href="https://ai.meta.com/research/">Fundamental AI Research</a> (FAIR) lab, <a href="https://pytorch.org/">PyTorch</a> has become the most widely used deep learning framework. Its <a href="https://github.com/pytorch/pytorch">GitHub repository</a> boasts over 82,400 stars and more than 22,000 forks, showcasing its immense popularity. Backed by a large and active community, PyTorch offers extensive support through its vibrant <a href="https://discuss.pytorch.org/">discussion forums</a>, enabling users to quickly resolve issues and streamline debugging. Major tech companies, including Apple, Meta, and TikTok, leverage PyTorch for their machine learning projects. Its growing popularity is also fueled by platforms like <a href="https://lightning.ai/">PyTorch Lightning</a> and <a href="https://huggingface.co/">Hugging Face</a>, which simplify code organization and provide access to state-of-the-art models, making it easier than ever for users to harness its power.
5560
</p>
5661

57-
<p>
62+
<p class="left-aligned">
5863
So let’s dive in and discover what Pytorch has to offer !
5964
</p>
6065

66+
<p class="left-aligned">
67+
Note that this article is based on <a href="https://pytorch.org/tutorials/beginner/basics/tensorqs_tutorial.html">this Pytorch tutorial</a>. I have summarized and added some more spices of my knowledge.
68+
</p>
69+
6170
<h3>Tensors</h3>
6271

72+
<p>
73+
Tensors are multi-dimensional data similar to matrices in <a href="https://numpy.org/">numpy</a>, but with additional attributes that enable parallel computing to accelerate calculations.
74+
</p>
75+
76+
<div class="code-box2 left-aligned">
77+
<pre class="line-numbers"><code class="language-python">import torch
78+
79+
x_ones = torch.ones_like(x_data)
80+
print(f"Ones Tensor: \n {x_ones} \n")
81+
82+
x_rand = torch.rand_like(x_data, dtype=torch.float)
83+
print(f"Random Tensor: \n {x_rand} \n")</code></pre>
84+
</div>
85+
86+
<h3>Link with NumPy arrays</h3>
87+
88+
<p>
89+
Tensors and <a href="https://numpy.org/doc/stable/reference/generated/numpy.ndarray.html">Numpy's ndarrays</a> are pretty much the same. They often share the same underlying memory on CPU, allow users to transfer data from one to another without having the need of creating new variables.
90+
</p>
91+
6392
<hr>
6493

6594
<div class="blog-page-end-nav-container">
@@ -108,5 +137,29 @@ <h3>Tensors</h3>
108137
</div>
109138
</div>
110139
</footer>
140+
141+
<script src="../../js/prism.js"></script>
142+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script> -->
143+
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script> -->
144+
<!-- <script>hljs.highlightAll();</script> -->
145+
<!-- <script>
146+
// Get the code block
147+
var codeBlock = document.querySelector('.code-box2');
148+
149+
// Get the text content, trim leading spaces or newlines
150+
codeBlock.innerHTML = codeBlock.innerHTML.trim();
151+
</script> -->
152+
<!-- <script>
153+
var pre= document.querySelector('pre');
154+
155+
//insert a span in front of the first letter. (the span will automatically close.)
156+
pre.innerHTML= pre.textContent.replace(/(\w)/, '<span>$1');
157+
158+
//get the new span's left offset:
159+
var left= pre.querySelector('span').getClientRects()[0].left;
160+
161+
//move the code to the left, taking into account the body's margin:
162+
pre.style.marginLeft= (-left + pre.getClientRects()[0].left)+'px';
163+
</script> -->
111164
</body>
112165
</html>

‎css/prism.css

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
/* PrismJS 1.29.0
2+
https://prismjs.com/download.html#themes=prism&languages=python&plugins=line-numbers */
3+
/**
4+
* prism.js default theme for JavaScript, CSS and HTML
5+
* Based on dabblet (http://dabblet.com)
6+
* @author Lea Verou
7+
*/
8+
9+
code[class*="language-"],
10+
pre[class*="language-"] {
11+
color: #051650;
12+
background: none;
13+
/* text-shadow: 0 1px white; */
14+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
15+
font-size: 1em;
16+
text-align: left;
17+
white-space: pre;
18+
word-spacing: normal;
19+
word-break: normal;
20+
word-wrap: normal;
21+
/* line-height: 1.5; */
22+
23+
-moz-tab-size: 4;
24+
-o-tab-size: 4;
25+
tab-size: 4;
26+
27+
-webkit-hyphens: none;
28+
-moz-hyphens: none;
29+
-ms-hyphens: none;
30+
hyphens: none;
31+
}
32+
33+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
34+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
35+
text-shadow: none;
36+
background: #b3d4fc;
37+
}
38+
39+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
40+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
41+
text-shadow: none;
42+
background: #b3d4fc;
43+
}
44+
45+
@media print {
46+
code[class*="language-"],
47+
pre[class*="language-"] {
48+
text-shadow: none;
49+
}
50+
}
51+
52+
/* Code blocks */
53+
pre[class*="language-"] {
54+
/* padding: 1em; */
55+
/* margin: .5em 0; */
56+
overflow: auto;
57+
}
58+
59+
:not(pre) > code[class*="language-"],
60+
pre[class*="language-"] {
61+
background: #ddd;
62+
}
63+
64+
/* Inline code */
65+
:not(pre) > code[class*="language-"] {
66+
padding: .1em;
67+
border-radius: .3em;
68+
white-space: normal;
69+
}
70+
71+
.token.comment,
72+
.token.prolog,
73+
.token.doctype,
74+
.token.cdata {
75+
color: #666;
76+
}
77+
78+
.token.punctuation {
79+
color: #999;
80+
}
81+
82+
.token.namespace {
83+
opacity: .7;
84+
}
85+
86+
.token.property,
87+
.token.tag,
88+
.token.boolean,
89+
.token.number,
90+
.token.constant,
91+
.token.symbol,
92+
.token.deleted {
93+
color: #905;
94+
}
95+
96+
.token.selector,
97+
.token.attr-name,
98+
.token.string,
99+
.token.char,
100+
.token.builtin,
101+
.token.inserted {
102+
color: #690;
103+
}
104+
105+
.token.operator,
106+
.token.entity,
107+
.token.url,
108+
.language-css .token.string,
109+
.style .token.string {
110+
color: #9a6e3a;
111+
/* This background color was intended by the author of this theme. */
112+
/* background: hsla(0, 0%, 100%, .5); */
113+
}
114+
115+
.token.atrule,
116+
.token.attr-value,
117+
.token.keyword {
118+
color: #07a;
119+
}
120+
121+
.token.function,
122+
.token.class-name {
123+
color: #DD4A68;
124+
}
125+
126+
.token.regex,
127+
.token.important,
128+
.token.variable {
129+
color: #e90;
130+
}
131+
132+
.token.important,
133+
.token.bold {
134+
font-weight: bold;
135+
}
136+
.token.italic {
137+
font-style: italic;
138+
}
139+
140+
.token.entity {
141+
cursor: help;
142+
}
143+
144+
pre[class*="language-"].line-numbers {
145+
position: relative;
146+
padding: 1em 3.8em;
147+
counter-reset: linenumber;
148+
}
149+
150+
pre[class*="language-"].line-numbers > code {
151+
position: relative;
152+
white-space: inherit;
153+
}
154+
155+
.line-numbers .line-numbers-rows {
156+
position: absolute;
157+
pointer-events: none;
158+
top: 0;
159+
font-size: 100%;
160+
left: -3.8em;
161+
width: 3em;
162+
letter-spacing: -1px;
163+
border-right: 1px solid #999;
164+
165+
-webkit-user-select: none;
166+
-moz-user-select: none;
167+
-ms-user-select: none;
168+
user-select: none;
169+
170+
}
171+
172+
.line-numbers-rows > span {
173+
display: block;
174+
counter-increment: linenumber;
175+
}
176+
177+
.line-numbers-rows > span:before {
178+
content: counter(linenumber);
179+
color: #999;
180+
display: block;
181+
padding-right: 0.8em;
182+
text-align: right;
183+
}
184+

‎css/style.css

+15-1
Original file line numberDiff line numberDiff line change
@@ -828,7 +828,8 @@ p {
828828
text-align: justify;
829829
}
830830

831-
.ai-cv-blog p.left-aligned {
831+
.ai-cv-blog p.left-aligned,
832+
.ai-cv-blog div.left-aligned {
832833
align-self: flex-start;
833834
}
834835

@@ -948,6 +949,19 @@ p {
948949
margin-left: var(--BLOG-FS);
949950
}
950951

952+
code {
953+
display: block;
954+
padding-left: 0;
955+
text-align: left;
956+
white-space: pre-wrap;
957+
width: 47.6vw;
958+
}
959+
960+
pre {
961+
width: 100%;
962+
overflow-x: auto;
963+
}
964+
951965
/* || MEDIA */
952966
@media screen and (max-width: 1024px) and (orientation: portrait) {
953967

0 commit comments

Comments
 (0)