Visualizzazione delle modifiche al codice e dei commenti

Contribuisci Funzionalità
1

Questa è una domanda su se una funzionalità esista (forse come plugin) o su una richiesta di funzionalità nel caso in cui non esista…

Quello che sto cercando è la possibilità di visualizzare qualcosa del genere all’interno delle discussioni del forum Discourse:

image
image786×179 10 KB

Non si tratta solo di mostrare un frammento di codice con l’evidenziazione della sintassi specifica del linguaggio (abbiamo già questa funzionalità introducendolo con <kbd>```php</kbd>, ad esempio, e chiudendolo con <kbd>```</kbd>).

Quello che voglio è la possibilità di evidenziare una riga, forse aggiungere un commento e mostrare una modifica alla riga. Queste funzionalità sono generalmente utili in qualsiasi forum che discute di argomenti tecnici, dove si consigliano modifiche da applicare o si indicano aree problematiche.

Anche se utilizziamo GitHub per il nostro progetto, non sto chiedendo specificamente di mostrare le modifiche così come avvengono su GitHub, ma piuttosto qualcosa che possa essere inserito indipendentemente all’interno di Discourse: l’immagine sopra è intesa solo come esempio di come potrebbe apparire.

2

Puoi visualizzare le differenze in questo modo:

Una riga normale
- riga rimossa
+ riga aggiunta


```diff
Una riga normale
- riga rimossa
+ riga aggiunta
```
6 Mi Piace
3

Ok… sembra :cool:

C’è qualche modo per combinarlo con l’evidenziazione della sintassi specifica per la lingua?

Il codice sembra così noioso senza di essa, e così fantastico con essa.

4

Purtroppo no — sono d’accordo, sarebbe comunque carino. Usiamo highlight.js per l’evidenziazione della sintassi. Sembra che ci sia stata una discussione simile nel loro repository GitHub, ma hanno deciso che era fuori dall’ambito del progetto.

3 Mi Piace
5

Hmm :thinking:

Quindi hanno quel frammento di codice lì; ciò che suggeriscono è che le persone lo implementino fuori dall’evidenziatore (in questo caso è marked.js, immagino che la stessa cosa si possa fare con highlight.js).

Pensi che Discourse possa farlo? O, prima domanda, ha senso dal punto di vista architetturale?

Immagino che l’idea generale sia semplicemente fare una ricerca e sostituzione, rimuovere i marcatori di diff, inviarlo all’evidenziatore della sintassi e poi lavorarci con un’ulteriore ricerca e sostituzione dopo. Sembra molto goffo, ma la verità è che il frammento di codice non è così complicato.

1 Mi Piace
6

È certamente possibile, ma non credo sarà facile. Tutto l’evidenziamento della sintassi avviene in JavaScript, quindi potrebbe essere manipolato utilizzando un componente tema.

1 Mi Piace
7

Come li hai resi colorati?

8

Type out the code block like this:

```diff
A normal line
- removed line
+ added line
```

Specifying diff as the syntax means that you can use + and - at the beginning of lines to highlight them green and red.

3 Mi Piace
9 
Una riga normale
- riga rimossa
+ riga aggiunta

Ce l’ho fatta! Grazie @david

2 Mi Piace
10

Da ora in poi userò la struttura diff, è molto utile.

Non vedo che Discourse implementi quell’altra suggerimento dal Gist; più ci penso, più credo che si adatterebbe perfettamente all’interno dell’evidenziatore della sintassi, non all’esterno.

In sostanza, col passare degli anni ha senso aggiungere alcune funzionalità agli evidenziatori di sintassi, e il compito base di mostrare il codice in modo leggibile si estende naturalmente anche a mostrare alcuni degli aspetti dinamici del codice.

Cosa è cambiato, dove, da chi; a cosa sto puntando; quale commento utile spiega la relazione del codice con il luogo in cui viene pubblicato, ecc.

Grazie a tutti per la partecipazione a questa discussione.

1 Mi Piace
11

Forse un’alternativa?

<del>del</del> 
<ins>ins</ins>

del
ins

4 Mi Piace