Cum inserez in blog fragmente de cod preluate din VS2010

Adica ceva de genul:

//
// GET: /Acc/ public ActionResult Index() {
//return View();
AccIndexViewModel viewdata = new AccIndexViewModel(repository.GetAccs(), repository.GetAgenti());
return View("Index", viewdata); }

Cerinte:

  1. Sa poata fi deosebita usor (vizual) parte de cod de restul articolului
  2. Codul sa fie formatat (aliniament, culori pe cuvinte cheie etc)
  3. No wrap – autoscroll automat pt. codul mai ‘lat’
  4. Numerotarea automata a liniilor
  5. Cand se copiaza codul de pe site sa nu fie preluata si numerotarea amintita mai sus
  6. Modificari minime in sursa HTML atunci cand se insereaza codul in articol.

Solutia 1: Folosirea plug-in-ului integrat in WordPress
Utilizare: se comuta articolul in mod HTML si se copiaza sectiunea de cod (copy/paste) intre tag-urile:

  • [ sourcecode language=”csharp” wraplines=”false”] – fara pauza inainte de sourcecode
  • [/sourcecode]

In functie de continutul codului, paramatrul language poate lua diverse valori: sql, css, javascript etc. O facilitate interesanta este data de parametrul highlight (ex:  highlight=”10,11″ subliniaza liniile de cod etichetate cu 10 si 11).

Avantaje:

  1. Simplitate – pt. blog-urile care au integrat un astfel de plug-in (ex. WordPress). Haselman explica cum poate fi folosit si pt. alte site-uri.

Dezavantaje:

  1. nu pastreaza formatarea din Visual Studio ci se bazeaza pe un dictionar propriu de recunoastere a cuvintelor cheie din fiecare limbaj.
  2. nu recunoaste  formatul aspx dar se pot folosi, cu rezultate multumitoare, parametrii “html” sau “xml” in tag-ul “language“.

Mai multe detalii aici. Rezultatul unui cod inserat cu aceasta metoda poate fi vizualizat in poza initiala.

Solutia 2: Se instaleaza un plug-in in VS2010 care adauga in meniul contextual de click dreapta (dupa selectia textului) optiunea „Save as HTML”. Am testat 2 astfel de plug-in-uri free: CoySourceAsHtml si CopyAsHtml. Primul are un dezavantaj major: recunoaste doar codul C# (nu si ASPX, CSS JavaScript etc) . Asadar am ales doar al 2-lea tool. Varianta disponibila la momentul actual este doar pt. VS2008 asa ca mai jos am prezentat configurarile necesare pt. a putea fi rulat si sub VS2010:

  1. Ruleaza fisier .msi
  2. Editeaza fisierul LavernockEnterprises.CopyAsHtml.2008.Addin (din \My Documents\Addin) si modifica valoarea de la tag-ul <version> din 9.0 in 10.0
  3. In VS2010 – Tools – Options – Environment – Add-in/Macros Sec. adauga calea spre fisierul .addin anterior configurat
  4. In VS2010 – Tools – Add-in Manager bifeaza inregistrarea aferenta acestui tool

5.   Verifica rezultatul: Selecteaza o portiune de cod -> „Copy As HTML”

6.  Dupa selectarea optiunii „Copy as HTML” apare un meniu de configurare pe care l-am salvat ca „default”:

  • am scos Line Numbers – altfel la „Copy/Paste” de pe site copiaza si numerotarea.
  • am debifat „wrap-lines”  – codul mai „lat” sa nu treaca pe rand nou
  • am bifat un-indent pt. ca sa se elimine automat cele 2 tab-uri din fata fiecarei linii de cod (vezi poza)
  • am setat background-ul in ton cu tema site-ului
  • am setat pt. clasele CSS niste denumiri fictive fiindca nu vreau sa folosesc style-ul default dar nici nu am posibilitatea sa modific fisierul CSS din din tema blog-ului (la WordPress optiunea e pe bani)

 7. Dupa „OK” rezultatul este depus in Clipboard. Daca continutul este copiat intr-un fisier txt, se pot observa tag-urile HTML. Daca se copiaza pe site, editorul trebuie trecut in mod HTML iar rezultatul obtinut va fi de forma:

//

// GET: /Acc/

public ActionResult Index()

{

    //return View();

    AccIndexViewModel viewdata = new AccIndexViewModel(repository.GetAccs(), repository.GetAgenti());

    return View(„Index”, viewdata);

}

Avantaje fata de solutia precedenta:

  1. Se pastreza formatarea din Visual Studio, mai precisa decat la solutia 1 (vezi identificatorul AccIndexViewModel care nu este recunosut in prima varianta)
  2. Nu necesita introducerea manuala a tag-ului „language” si a parametrilor acestuia. Nici macar  a tag-ului „code
  3. Recunoaste (probabil) toate limbajele suportate de VS (solutia 1 nu recunoaste  formatul aspx dar se pot folosi, cu rezultate multumitoare, parametrii „html” sau „xml” in tag-ul „language„).

Dezavantaje:

  1. Necesita instalarea si configurarea (o singura data) unui add-on in  Visual Studio.
  2. In opinia mea, codul generat cu prima solutie este mai elegant si mai compact.

 

Solutia 3. Trece editorul in mod HTML si copiaza codul, pur si simplu, intre tag-urile „code”. Rezultatul va fi de forma:

//
// GET: /Acc/
public ActionResult Index()
{
//return View();
AccIndexViewModel viewdata = new AccIndexViewModel(repository.GetAccs(), repository.GetAgenti());
return View("Index", viewdata);
}

Avantaje:

  1. Simplitate – nu necesita tool-uri suplimentare si functioneaza pe orice fel de site/blog.

Dezavantaje

  1. continut neformatat (initial fara background, culori, indent-uri etc), deci mai putin lizibil
  2. face wrap pt. liniile mai lungi
  3. se poate face o minima personalizare dar cu efort mare si cunostinte de CSS (background, font sau  culoare pt. intregul text). In exemplul de mai sus am incadrat tag-ul „code” intr-un „div” la care i-am aplicat optiunea style=”background-color:#ededed;color:blue; overflow: auto”

 

Solutia 4. Se bazeaza pe acelasi principiu ca solutia 1 (formatarea textul pe baza unui dictionar aferent fiecarui limbaj cunoscut) doar ca acest lucru nu se face printr-un plug-in continut in blog ci presupune formatarea prealabila cu ajutorul unei aplicatii care ruleaza pe pc-ul local sau pe internet (vezi un exemplu aici). Rezultatul aceluias cod, inserat in meniul HTML, va arata astfel:

1 //
2 // GET: /Acc/
3
4 public ActionResult Index()
5 {
6 //return View();
7 AccIndexViewModel viewdata = new AccIndexViewModel(repository.GetAccs(), repository.GetAgenti());
8 return View(Index, viewdata);
9 }

Avantaje:

  1. Continutul returnat se poate copia pe orice site / blog care nu contine un plug-in dedicat pt. acest scop

Dezavantaje (depind de softul folosit):

  1. textul furnizat de utilitarul la care fac referire mai sus este formatat aproape identic ca si la solutia 1 dar, blocul de cod, in totalitate, nu se distinge usor de restul articolului (se poate insera un background pt. articol dar la fel de dificil si incomod ca la solutia 3.
  2. trebuie sa folosesc optiunea „fara numerotare” – altfel la copierea de pe site se vor prelua si aceste etichete
  3. nu pastreaza continuitatea liniile de cod mai lungi
  4. necesita apelarea unui tool sau site intermediar

…………………………………………………………….

PS1: In iunie2010 a aparut un add-on pt. VS2010 care rezolva, printre altele, si aceasta problema.
Cauta dupa „HTML copy” in link-ul acesta.

PS2 (dec.2010): Daca folosesti un WordPress personal atunci, implicit nu ai nici un plugin pt. „”syntax highlight”. Solutia este sa instalezi manual un astfel de plugin. Eu folosesc wp-syntax care se bazeaza pe framework-ul GeSHi. O varianta, se pare, mai populara este SyntaxHighlighter Evolvev care are la baza  framework-ul lui Alex Gorbatchev, dar la mine nu a functionat (nu dadea eroare dar codul aparea fara nici un style). In wp-syntax poti schimba culorile din fisierul php cu nume sugestiv (ex: sql.php)

Anunțuri

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s

%d blogeri au apreciat asta: