style: Update colors in prism.css for consistency
This commit is contained in:
parent
baca4c78e7
commit
e7ec34ea6a
@ -8,7 +8,7 @@
|
||||
.dark .token.rule,
|
||||
.dark .token.pseudo-class,
|
||||
.dark .token.important {
|
||||
color: #CB5FDE;
|
||||
color: #cb5fde;
|
||||
}
|
||||
|
||||
.dark .token.comment,
|
||||
@ -25,16 +25,16 @@
|
||||
.dark .token.attr-value,
|
||||
.dark .token.class,
|
||||
.dark .token.string {
|
||||
color: #89CA6C;
|
||||
color: #89ca6c;
|
||||
}
|
||||
|
||||
.dark .token.property,
|
||||
.dark .token.tag {
|
||||
color: #E3596F;
|
||||
color: #e3596f;
|
||||
}
|
||||
|
||||
.dark .token.function-variable {
|
||||
color: #61AFEF;
|
||||
color: #61afef;
|
||||
}
|
||||
|
||||
/** Light mode */
|
||||
@ -42,13 +42,13 @@
|
||||
.token.attr-value,
|
||||
.token.class,
|
||||
.token.string {
|
||||
color: #50A14F;
|
||||
color: #50a14f;
|
||||
}
|
||||
|
||||
.token.function-variable,
|
||||
.token.generic-function,
|
||||
.token.function {
|
||||
color: #4078F2;
|
||||
color: #4078f2;
|
||||
}
|
||||
|
||||
.token.module,
|
||||
@ -56,28 +56,29 @@
|
||||
.token.rule,
|
||||
.token.pseudo-class,
|
||||
.token.important {
|
||||
color: #A626A4;
|
||||
color: #a626a4;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant {
|
||||
color: #E55649;
|
||||
color: #e55649;
|
||||
}
|
||||
|
||||
.token.generic,
|
||||
.token.attr-name,
|
||||
.token.entity,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.class-name {
|
||||
color: #C18401;
|
||||
color: #c18401;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.combinator {
|
||||
color: #A0A1A7;
|
||||
color: #a0a1a7;
|
||||
}
|
||||
.token.operator,
|
||||
.token.builtin {
|
||||
color: #0184BC;
|
||||
color: #0184bc;
|
||||
}
|
||||
@ -25,6 +25,7 @@ export async function data(pageContext: PageContext) {
|
||||
if (cachePathname === "") cachePathname = "index";
|
||||
|
||||
const doc = docCache.get(cachePathname);
|
||||
console.log(doc);
|
||||
|
||||
if (!doc) {
|
||||
console.error(
|
||||
|
||||
@ -5,6 +5,7 @@ tags: []
|
||||
---
|
||||
|
||||
import Callout from "@/components/Callout";
|
||||
import tabs from "./tabs";
|
||||
|
||||
HTML est un langage de balisage utilisé pour structurer le contenu des pages web.
|
||||
Bien qu'il ne s'agisse pas d'un langage de programmation à proprement parler, il reste fondamental pour créer des sites web.
|
||||
@ -14,7 +15,7 @@ Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de c
|
||||
## 🤔 Qu'est-ce que le HTML ?
|
||||
|
||||
HTML, ou **HyperText Markup Language**, est le langage standard utilisé pour créer des pages web. Il s'agit d'un langage de balisage qui utilise des **balises** pour structurer le contenu.
|
||||
Il s'agit du squelette d'une page web, qui définit la structure et le contenu de celle-ci.
|
||||
Il s'agit du **squelette d'une page web**, qui définit la structure et le contenu de celle-ci.
|
||||
|
||||
<Callout type="question" title="Pourquoi HTML n'est pas un langage de programmation ?">
|
||||
Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation.
|
||||
@ -22,15 +23,32 @@ Il s'agit du squelette d'une page web, qui définit la structure et le contenu d
|
||||
<Callout type="note" title="Langage de programmation" collapsible>
|
||||
Un langage de programmation est un ensemble de règles et de conventions qui permettent d'écrire des instructions que l'ordinateur peut comprendre et exécuter.
|
||||
Ces instructions peuvent inclure des calculs, des conditions, des boucles, etc.
|
||||
|
||||
Parmis les langages de programmation les plus connus, on peut citer :
|
||||
|
||||
- JavaScript
|
||||
- Python
|
||||
- Java
|
||||
- C++
|
||||
- C#
|
||||
|
||||
et bien d'autres !
|
||||
</Callout>
|
||||
|
||||
Si on regarde la définition d'un langage de programmation, on peut voir que le HTML ne correspond pas à cette définition.
|
||||
Tout simplement parce que le HTML ne permet pas d'écrire des instructions que l'ordinateur peut exécuter !
|
||||
</Callout>
|
||||
|
||||
Mais bon... savoir ça c'est bien : mais ça ne va pas nous aider à créer des pages web.
|
||||
|
||||
## 🏗️ La structure d'une page HTML
|
||||
|
||||
Une page HTML est composée de plusieurs éléments, chacun ayant un rôle spécifique.
|
||||
|
||||
Par exemple, une page HTML typique contient les éléments suivants :
|
||||
- `<!DOCTYPE html>` : Indique au navigateur que le document est un fichier HTML.
|
||||
- `<html>` : L'élément racine qui englobe tout le contenu de la page.
|
||||
- `<head>` : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc.
|
||||
- `<body>` : Contient le contenu visible de la page, comme le texte, les images, les liens, etc.
|
||||
|
||||
Il s'agit des balises de base qui composent une page HTML.
|
||||
Voici un exemple de code HTML simple :
|
||||
|
||||
<tabs.htmlBase />
|
||||
|
||||
<Callout type="question" title="C'est quoi la balise `<!-- -->` ?">
|
||||
La balise `<!-- -->` est utilisée pour ajouter des commentaires dans le code HTML.
|
||||
Ces commentaires ne sont pas affichés dans le navigateur et sont uniquement visibles dans le code source de la page.
|
||||
|
||||
On les utilise pour ajouter des notes ou des explications dans le code, ce qui peut être utile pour les développeurs qui lisent le code plus tard.
|
||||
</Callout>
|
||||
52
app/pages/docs/html/tabs.tsx
Normal file
52
app/pages/docs/html/tabs.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Snippet } from "@/components/Snippet";
|
||||
|
||||
const htmlBaseSnippets = [
|
||||
{
|
||||
name: "Exemple de structure HTML de base",
|
||||
codeLanguage: "html",
|
||||
withLineNumbers: true,
|
||||
code: `<!-- On indique au navigateur que le document est en HTML -->
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!-- On indique la langue du document (ici, en français) -->
|
||||
<html lang="fr">
|
||||
|
||||
<!-- On indique les paramètres de la page... -->
|
||||
<head>
|
||||
<!-- ... commme le titre de la page... -->
|
||||
<title>Mon super site</title>
|
||||
|
||||
<!-- ... et la description de la page... -->
|
||||
<meta name="description" content="Ceci est un exemple de page HTML.">
|
||||
</head>
|
||||
|
||||
<!-- On indique le début du corps de la page -->
|
||||
<!-- Le corps de la page contient le contenu visible par l'utilisateur -->
|
||||
<body>
|
||||
<!-- On indique le début d'un en-tête -->
|
||||
<header>
|
||||
<!-- On indique le titre principal de la page -->
|
||||
<h1>Bienvenue sur ma page HTML</h1>
|
||||
</header>
|
||||
|
||||
<!-- On indique le début d'une section -->
|
||||
<section>
|
||||
<!-- On indique un sous-titre -->
|
||||
<h2>Voici un exemple de section</h2>
|
||||
<!-- On indique un paragraphe -->
|
||||
<p>Ceci est un exemple de paragraphe dans une section.</p>
|
||||
</section>
|
||||
|
||||
<!-- On indique le début d'un pied de page -->
|
||||
<footer>
|
||||
<!-- On indique un texte de copyright -->
|
||||
<p>© 2023 Mon Site Web</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>`,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
|
||||
};
|
||||
0
app/pages/docs/html/test.html
Normal file
0
app/pages/docs/html/test.html
Normal file
Loading…
Reference in New Issue
Block a user