Come inserire Syntax Highlithing nel "code block" di Squarespace.

Devo dire che non è stato proprio un gioco da ragazzi anzi ci ho messo un pochino per capire come utilizzarlo con Squarespace

Sono stato in grado di integrare Prism syntax highlithing utilizzando un "blocco" , per chi non sapesse cosa significa "blocchi" in Squarespace potete leggere questo tutorial .

Il risultato è davvero soddisfacente e graficamente è anche bello da vedere. Se poi avete tempo da investire potete editare e aggiustare lo stile andando nel file CSS e cambiando qualche impostazione.

Step da eseguire

 

  1. Vai nel sito Prism e Scegli la versione di sviluppo che più ti piace. Una volta scelto quale tema utilizzare, linguaggi di programmazione e plugin. Scarica sia file CSS e JS.
  2. Potresti caricare i file in qualche server tipo (Amazon ES2 per esempio) o è possibile copiare i file direttamente. Sceglierò quest'ultima, mostrando come includere i file direttamente.
    Utilizzando un editor di testo, apri un nuovo file, prima di tutto noi importare il CSS.       NB: Non eseguire le modifiche che vorreste fare all'interno del "code block" di Squarespace, perché potrebbe compromettere il codice.
  3. Nel nuovo file, utilizza questa sintassi: <style> </ style>.
  4. Una volta scritto quei tag, copia e incolla tra i due tutto il contenuto del file prism.css.
  5. Subito sotto la chiusura del tag </ style> , scrivi quest'altro tag: <script> </ script>.
  6. Incolla il file sorgente JavaScript tra i tag di script. (basta che incolli tutto il contenuto quando schiacci il pulsante download dal sito Prism).
  7. È possibile inserire il codice in qualsiasi punto del sito, si può posizionare nel piè di pagina con l'apposita "code injection", nell header, nel header del blog, o nel post block header. Ovunque si desidera. Ho scelto di inserirlo nel "blog post item injection point" il che significa che l'evidenziazione della sintassi verrà applicato solo ai messaggi all'interno di quella pagina del blog.
  8. Ora viene il bello, sarà necessario inserire un "code block" all'interno di un post.
  9. Poi per far si che venga riconosciuto da Prism syntax highliting bisogna iniziare con <pre> <code class=language-*> e chiudi i tag </code></pre>. 
  10. Dove vedete scritto <code class=language-*> subito dopo l'uguale mette il linguaggio di programmazione che preferite nel mio caso è Swift.
  11. Ok ci siete...Salvate il tutto e andate su anteprima per vedere come è venuto fuori.


Un esempio:

@IBAction func snapBarButtonItemTapped(sender: AnyObject) {
        if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.Camera) {
            var cameraController = UIImagePickerController()
            cameraController.delegate = self
            cameraController.sourceType = UIImagePickerControllerSourceType.Camera
            
            let mediaTypes: [AnyObject] = [kUTTypeImage]
            cameraController.mediaTypes = mediaTypes
            cameraController.allowsEditing = false
            
            self.presentViewController(cameraController, animated: true, completion: nil)
        }

NB: uso un Mac quindi certi short cut sono per quel computer... 

 

Grazie a tutti 

alla prossima 

Se avete dubbi scrivete e commentate...