Merge

2023-09-16 19:58:47 +02:00 · 2023-09-16 19:58:47 +02:00 · f7bc1f6081
commit f7bc1f6081
parent a59d111812 6277029918
3 changed files with 267 additions and 1 deletions
--- a/journals/2023_09_12.md
+++ b/journals/2023_09_12.md
@ -1 +1,3 @@
- **20:21** [[quick capture]]:  [Fine-tune your own Llama 2 to replace GPT-3.5/4](https://news.ycombinator.com/item?id=37484135) #llm #AI
+- **20:21** [[quick capture]]:  [Fine-tune your own Llama 2 to replace GPT-3.5/4](https://news.ycombinator.com/item?id=37484135) #llm #AI
+- Sito utile contente lista di emoji #unicode
+	- https://apps.timwhitlock.info/emoji/tables/unicode
--- a/journals/2023_09_15.md
+++ b/journals/2023_09_15.md
@ -0,0 +1,258 @@
+- Chat con #GPT-4 su come realizzare un editor #Markdown senza #svelte senza l'utilizzo di libreria esterne (non risolto)
+	- Modifica il seguente componente Svelte in modo che la textarea implementi un semplice editor markdown con syntax highlight.
+	- <script lang="ts">
+	  - import { createEventDispatcher } from 'svelte';
+	  - const dispatch = createEventDispatcher();
+	  - export let content: string
+	  - function init(el: HTMLTextAreaElement){
+	  - el.focus()
+	  - }
+	  - 
+	  - async function handleKeyDown(event: any) {
+	  - if (event.key === 'Escape') {
+	  - dispatch('quitEditor')
+	  - }
+	  - }
+	  - </script>
+	- <div class="card p-4 my-3 mx-4 font-heading-token">
+	  - <textarea bind:value={content} on:keydown={handleKeyDown} class="textarea p-8" rows="20" use:init></textarea>
+	  - </div>
+	- <style>
+	  - textarea {
+	  - font-family: monospace;
+	  - }
+	  - </style>
+	- Per implementare un semplice editor markdown con syntax highlight, potresti utilizzare un pacchetto come `markdown-it` per il parsing del markdown e `prism.js` per l'highlighting della sintassi.
+	- Inoltre, avrai bisogno di un modo per rilevare i cambiamenti al contenuto della textarea e aggiornare l'output di conseguenza. Puoi farlo utilizzando l'evento `input` e il binding bidirezionale in Svelte.
+	- Ecco come potrebbe apparire il tuo componente modificato:
+	- ```svelte
+	  <script lang="ts">
+	   import { createEventDispatcher, onMount } from 'svelte';
+	   import MarkdownIt from 'markdown-it';
+	   import Prism from 'prismjs';
+	   import 'prismjs/themes/prism.css'; // Importa il tema CSS che preferisci
+	  - const dispatch = createEventDispatcher();
+	   const md = new MarkdownIt();
+	   let content: string = '';
+	   let output: string = '';
+	  - function init(el: HTMLTextAreaElement) {
+	     el.focus();
+	   }
+	  - function handleKeyDown(event: any) {
+	     if (event.key === 'Escape') {
+	         dispatch('quitEditor');
+	     }
+	   }
+	  - function handleInput(event: any) {
+	     content = event.target.value;
+	     output = md.render(content);
+	     Prism.highlightAll();
+	   }
+	  - onMount(() => {
+	     output = md.render(content);
+	     Prism.highlightAll();
+	   });
+	  - </script>
+	  - <div class="card p-4 my-3 mx-4 font-heading-token">
+	    <textarea bind:value={content} on:keydown={handleKeyDown} on:input={handleInput} class="textarea p-8" rows="20" use:init></textarea>
+	    <div class="output" bind:innerHTML={output}></div>
+	  </div>
+	  - <style>
+	   textarea {
+	    font-family: monospace;
+	   }
+	   .output {
+	    margin-top: 20px;
+	    border: 1px solid #ccc;
+	    padding: 10px;
+	    border-radius: 4px;
+	    overflow: auto;
+	   }
+	  </style>
+	  ```
+	- In questo esempio, ogni volta che l'utente digita nella textarea, l'evento `input` viene attivato e la funzione `handleInput` viene chiamata. Questa funzione aggiorna il contenuto, lo converte in HTML utilizzando `markdown-it`, e poi lo assegna a `output`. Infine, `Prism.highlightAll()` viene chiamato per eseguire l'highlighting della sintassi.
+	- Alla fine, il contenuto convertito in HTML viene visualizzato nel div con la classe `output`.<script lang="ts">
+	- import { createEventDispatcher } from 'svelte';
+	- const dispatch = createEventDispatcher();
+	- export let content: string
+	- function init(el: HTMLTextAreaElement){
+	- el.focus()
+	- }
+	-
+	- async function handleKeyDown(event: any) {
+	- if (event.key === 'Escape') {
+	- dispatch('quitEditor')
+	- }
+	- }
+	- </script>
+	- <div class="card p-4 my-3 mx-4 font-heading-token">
+	  - <textarea bind:value={content} on:keydown={handleKeyDown} class="textarea p-8" rows="20" use:init></textarea>
+	  - </div>
+	- <style>
+	  - textarea {
+	  - font-family: monospace;
+	  - }
+	  - </style>
+	- Non ho bisogno del rendering HTML da Markdown, ho solo bisogno che la textarea abbia il syntax highlight per Markdown.
+	- Per aggiungere solo l'highlighting della sintassi Markdown alla textarea, puoi utilizzare una libreria come `codemirror`. `codemirror` è un versatile editor di testo implementato in JavaScript per il browser. Supporta molte lingue di programmazione e markup, tra cui Markdown.
+	- Ecco come potrebbe apparire il tuo componente modificato:
+	- ```svelte
+	  <script lang="ts">
+	   import { onMount } from 'svelte';
+	   import CodeMirror from 'codemirror';
+	   import 'codemirror/lib/codemirror.css';
+	   import 'codemirror/mode/markdown/markdown';
+	  - let editor;
+	   let content: string = '';
+	  - onMount(() => {
+	     editor = CodeMirror.fromTextArea(document.querySelector('.textarea'), {
+	         lineNumbers: true,
+	         mode: 'markdown',
+	     });
+	  - editor.on('change', () => {
+	         content = editor.getValue();
+	     });
+	   });
+	  - function handleKeyDown(event: any) {
+	     if (event.key === 'Escape') {
+	         // Fai qualcosa quando viene premuto il tasto Escape
+	     }
+	   }
+	  - </script>
+	  - <div class="card p-4 my-3 mx-4 font-heading-token">
+	    <textarea class="textarea p-8" rows="20"></textarea>
+	  </div>
+	  - <style>
+	   .CodeMirror {
+	    border: 1px solid #eee;
+	    height: auto;
+	   }
+	  </style>
+	  ```
+	- In questo esempio, `codemirror` viene utilizzato per trasformare la textarea in un editor con highlighting della sintassi Markdown. Ogni volta che l'utente apporta modifiche nell'editor, il contenuto viene aggiornato.
+	- Vorrei un'implementazione che non preveda l'uso di alcuna libreria esterna.
+	- Se non vuoi utilizzare alcuna libreria esterna, puoi implementare un semplice highlighting della sintassi Markdown manualmente. Ecco come potrebbe apparire il tuo componente modificato:
+	- ```svelte
+	  <script lang="ts">
+	   import { createEventDispatcher } from 'svelte';
+	  - const dispatch = createEventDispatcher();
+	   let content: string = '';
+	   let highlightedContent: string = '';
+	  - function init(el: HTMLTextAreaElement) {
+	     el.focus();
+	   }
+	  - function handleKeyDown(event: any) {
+	     if (event.key === 'Escape') {
+	         dispatch('quitEditor');
+	     }
+	   }
+	  - function handleInput(event: any) {
+	     content = event.target.value;
+	     highlightedContent = content.replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>')
+	                                 .replace(/(\*|_)(.*?)\1/g, '<em>$2</em>')
+	                                 .replace(/`([^`]+)`/g, '<code>$2</code>')
+	                                 .replace(/\n/g, '<br/>');
+	   }
+	  - </script>
+	  - <div class="card p-4 my-3 mx-4 font-heading-token">
+	    <textarea bind:value={content} on:keydown={handleKeyDown} on:input={handleInput} class="textarea p-8" rows="20" use:init></textarea>
+	    <pre class="output">{highlightedContent}</pre>
+	  </div>
+	  - <style>
+	   textarea {
+	    font-family: monospace;
+	   }
+	   .output {
+	    margin-top: 20px;
+	    border: 1px solid #ccc;
+	    padding: 10px;
+	    border-radius: 4px;
+	    overflow: auto;
+	    white-space: pre-wrap;       /* css-3 */
+	    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+	    white-space: -pre-wrap;      /* Opera 4-6 */
+	    white-space: -o-pre-wrap;    /* Opera 7 */
+	    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	   }
+	  </style>
+	  ```
+	- In questo esempio, ogni volta che l'utente digita nella textarea, l'evento `input` viene attivato e la funzione `handleInput` viene chiamata. Questa funzione aggiorna `content` e poi utilizza espressioni regolari per trovare e sostituire la sintassi Markdown con l'equivalente HTML, che viene poi assegnato a `highlightedContent`.
+	- Alla fine, `highlightedContent` viene visualizzato nel tag `pre` con la classe `output`. Nota che il tag `pre` è utilizzato per preservare sia gli spazi bianchi che le interruzioni di riga.
+	- Questa è un'implementazione molto semplice e non copre tutte le funzionalità di Markdown, ma dovrebbe darti un'idea di come potresti iniziare a implementare l'highlighting della sintassi Markdown manualmente.
+	- No, a me serve che il syntax highlight avvenga direttamente mentre scrivo nella textarea!
+	- Purtro è un elemento HTML che non supporta l'HTML interno o lo stile inline, quindi non è possibile evidenziare la sintassi direttamente all'interno di essa.
+	- Tuttavia, c'è un trucco che potrebbe funzionare per te. Puoi sovrapporre un elemento `pre` con un elemento `code` all'interno della textarea e sincronizzare il contenuto della textarea con l'elemento `code`. L'elemento `code` può avere stili CSS applicati ad esso, quindi puoi utilizzare questo per ottenere l'effetto di evidenziazione della sintassi.
+	- Ecco un esempio di come potrebbe funzionare:
+	- ```svelte
+	  <script lang="ts">
+	  import { createEventDispatcher } from 'svelte';
+	  - const dispatch = createEventDispatcher();
+	  let content: string = '';
+	  - function init(el: HTMLTextAreaElement) {
+	    el.focus();
+	  }
+	  - function handleKeyDown(event: any) {
+	    if (event.key === 'Escape') {
+	      dispatch('quitEditor');
+	    }
+	  }
+	  - function handleInput(event: any) {
+	    content = event.target.value;
+	  }
+	  - </script>
+	  - <div class="card p-4 my-3 mx-4 font-heading-token">
+	  <div class="textarea-container">
+	    <pre class="textarea-backdrop"><code>{content}</code></pre>
+	    <textarea bind:value={content} on:keydown={handleKeyDown} on:input={handleInput} class="textarea p-8" rows="20" use:init></textarea>
+	  </div>
+	  </div>
+	  - <style>
+	  .textarea-container {
+	    position: relative;
+	  }
+	  .textarea-backdrop {
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    border: 1px solid #ccc;
+	    padding: 10px;
+	    border-radius: 4px;
+	    overflow: auto;
+	    white-space: pre-wrap;
+	    pointer-events: none;
+	  }
+	  .textarea {
+	    position: relative;
+	    background: transparent;
+	    font-family: monospace;
+	    border: 1px solid #ccc;
+	    padding: 10px;
+	    border-radius: 4px;
+	  }
+	  /* Aggiungi qui i tuoi stili di evidenziazione della sintassi */
+	  code {
+	    color: #333;
+	  }
+	  </style>
+	  ```
+	- In questo esempio, la textarea e l'elemento `pre` sono entrambi posizionati assolutamente all'interno del contenitore, quindi si sovrappongono. La textarea ha un background trasparente, quindi puoi vedere l'elemento `pre` dietro di essa. Quando l'utente digita nella textarea, il contenuto viene sincronizzato con l'elemento `pre`, che può avere stili CSS applicati ad esso.
+	- Nota che questo è un trucco e potrebbe non funzionare perfettamente in tutti i casi. Ad esempio, se la textarea ha uno scorrimento, l'elemento `pre` non scorrerà con essa. Inoltre, dovrai gestire l'evidenziazione della sintassi da solo, ad esempio utilizzando espressioni regolari per rilevare la sintassi Markdown e applicare gli stili CSS appropriati.
+- Esempi di funzione e non #teaching
+	- ## Relazioni che non sono funzioni
+		- #### Esempio 1
+			- A: Londra, Parigi, Madrid
+			- B: Spagna, Inghilterra, Francia
+		- #### Esempio 2
+			- A: Bigné, Brioche, Crostata
+			- B: Marmellata, Cioccolato, Crema
+	-
+	- ## Funzioni
+		- #### Esempio 1
+			- A: 4, 8, 12, 20
+			- B: 40, 80, 120, 200
+		- #### Esempio 2
+			- A: Cuoco, Pompiere, Insegnante
+			- B: Paolo, Francesco, Luca
+		- Esempio 3
+			- A: G, S, E
+			- B: Gatto, Cane, Pesce
--- a/pages/Cybersecurity
+++ b/pages/Cybersecurity
@ -0,0 +1,6 @@
+## Lezione 1 (4 ore)
+	- Test d'ingresso
+	- Installazione di Kali Linux
+		- Ridimensionamento della partizione Windows
+	- Presentazione della piattaforma TryHackMe e dei moduli relativi al corso
+		- Configurazione della VPN (risolvere problema su #archlinux )