Tisk příspěvku na Blogspot a kopírování kódu z Visual Studia jako HTML

První blog jsem si kdysi založil na vývojaři a pořád ho tam ještě mám - http://blog.vyvojar.cz/mstr/. Je to prakticky už jeden z posledních aktivních blogů na tomto kdysi aktivním serveru. Na svoji dobu nebyl špatný, ale nějak ustrnul, občas je nedostupný a psaní a zejména formátování příspěvků nebyla snadná práce. 

V té době práci hodně usnadnil Live Writer, o kterém jsem napsal i na svém blogu http://blog.vyvojar.cz/mstr/archive/2008/07/19/ja_2C00_-live-writer-blog-a--vyvojar.aspx. Ale protože mnohé další problémy zůstávali, změnil jsme nakonec službu a skončil u Google. Psaní programátorských příspěvků ale ztrpčovalo vkládání kódu - jak to udělat, aby to vypadalo pěkně. Nakonec jsem k nějakému řešení dospěl a tady je stručný postup

Kopírování kódu Visual Studia jako html

Je nutné si nainstalovat doplněk Productivity Power Tools. Instalace je jednoduchá, stačí vyvolat okno Extension and Updates přes nabídku Tools > Extension and updates.

Poté se musí doplněk vyhledat, nainstalovat a následuje restart Visual Studia.

Po restartu v okně Options (Tools > Options) vyhledáme položku Productivity Power Tools a podpoložku HTML Copy a nastavíme ji takto:

Poznámka: klíč EmitSpanStyle může být nastaven na False, ale nastavením na True se zajistí správné barevné kopírování kódu i do jiných cílových destinací, než je blog. 

Tím je nastavení Visual Studia hotové. Nyní stačí označit kód, který se ma kopírovat a z nabídky Edit zvolit nový příkaz Copy Html Markup:

Nastavení šablony na blogu:

Aby se zkopírovaný kód na stránkách blogu dobře vykreslil, je nutné si přidat vlastní styly. Jde to takto:

V administraci  blogu vybereme sekci Šablona poté a klikneme na  tlačítko Personalizovat:

Poté zvolíme Pokročilé  a z rolovacího seznamu vybereme Přidat CSS:

Do příslušného okénka  vložíme tento CSS kód:

pre
{
  font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
  color: #000000;
  background-color: #eee;
  font-size: 12px; 
  border: 1px dashed #999999;
  line-height: 13px; 
  padding: 15px; 
  overflow: auto; 
  max-width: 95%;
  max-height: 300px;
}

pre code {
    color: #000000;
    word-wrap: normal;
}

pre code .keyword {
    color: blue;
}

pre code .identifier {
    color: #333!important;
    font-weight: bolder;
}

pre code .operator {
}

pre code .User.Types {
    color: blue;
}

pre code .string {
    color: #a31515!important;
    font-weight: bolder;
    background-color: #E8FF11;
}

Ten zajistí, aby se vložený kod obarvil jednotným způsobem a zároveň aby se na obrazovku vykreslil odděleně a v případě, že přesáhne výška 300 px, aby se objevily rolovací lišty.

Výsledek na stránce vypadá takto:

Tisk příspěvku

Pokud si někdo chce vytisknou příspěvek, není výsledek příliš pěkný. Ve výchozím nastavení se tiskne i boční panel blogu a spousta se článkem nesouvisejícího balastu. Řešením je přidat vlastní styl pro tisk. Postup je stejný jako při vkládání vlastních stylů podle popisu v předchozí stati, je ale potřeba přidat k již stávajícím stylům toto:

@media print {
    pre {
        font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
        color: #000000;
        background-color: white!important;
        font-size: 12px;
        border: 1px dashed #999999;
        line-height: 13px;
        padding: 15px;
        min-height: 0;
        max-height: none;
        word-wrap: break-word;
    }
  
    pre code * {
        overflow-wrap: break-word;
    }
  
    /* hide Blogger bar */
    #navbar-iframe {
        display: none;
    }
    
    /* Reset colors to black text on white background and background images */
    .header,
    .footer-outer,
    .post-outer {
        background-color: white;
        background-image: none;
        color: black;
        text-shadow: none;
    }
  
    /* Hide Pages, sidebars, embedded videos & iframes */
    .tabs-outer {
        display: none;
    }
  
    .sidebar {
        display: none;
        width: 0%;
    }
  
    iframe,
    object {
        display: none;
    }
  
    .blog-pager,
    .quickedit,
    .post-feeds,
    .post-share-buttons,
    .comment-replybox-thread {
        display: none;
    }
  
    /* Reset post width to fill the entire page */
    .main-inner,
    .columns {
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-top: 5px!important;
        width: 100%;
    }
  
    .content-outer {
        margin: 0px;
        width: 100%;
    }
  
    .content-inner {
        padding: 0px;
        width: 100%;
    }
  
    .post-outer {
        border: none;
        width: 100%;
    }
  
    /* Specific for my blog */
    #footer-2-1,
    #footer-2-2,
    #sharenav,
    .buttonlist,
    .videocontainer {
        display: none;
    }
  
    .comment-form {
        display: none;
    }
  
    .header-inner .Header .descriptionwrapper {
        padding: 0px 30px;
        margin-botton: 5px;
    }
  
    .Header .description {
        margin: 0px;
        font-size: 100%;
    }
  
    .post-footer {
        display: none;
    }
  
    .comments .continue {
        display: none;
    }
  
    .comment-actions.secondary-text {
        display: none;
    }
  
    .comments .comment-thread.inline-thread {
        background-color: white!important;
    }
  
    .comments .avatar-image-container {
        display: none;
    }
  
    .comments .comment-block {
        margin-left: 0;
    }
  
    .comments .thread-toggle {
        display: none;
    }
  
    .comments .comments-content .comment {
        margin-bottom: 2px;
        margin-top: 2px;
    }
  
    .post {
        margin-bottom: 5px;
    }
    
   .column-center-outer {
        width: 98%;
    }
   
    .main-inner .fauxcolumn-right-outer {
        display: none;
    }
    
    .footer-outer {
        display: none;
    }
    
    body {
        font-size: 16px;
    }
    
    .header h1 {
        font-size: 100%;
        margin-bottom: 2px;
    }
  
    .header {
        height: auto;
    }
  
    .header-inner .Header .descriptionwrapper {
        margin-bottom: 2px;
    }
}

Poznámka - část stylů jsem získal na této stránce: http://exde601e.blogspot.cz/2012/05/make-blogger-more-printer-friendly.html , ale přidal jsem další na úpravu komentářů, kódu, velikosti hlavičky apod.

Pokud je potřeba něco doladit, je dobré si otevřít stránku blogu v Chrome, vyvolat DevTools (F12), stiskem Esc vyvolat konzolu a na kartě Emulation zapnout Screen a jako Css Media vybrat Print. Lze si pak hrát s prvky a styly a docílit kýženého efektu pro tisk. Upravené styly je nutné uložit do @media print sekce, jak je popsáno v předchozí stati.

Vložení ukázky kódu do příspěvku

Po zkopírování kódu ve Visual Studiu přes Copy Html Markup se na bloggeru přepne do Html režimu a vloží se kód:

Kód se vkládá prostým kopírování, tedy Ctrl+V: 

Poté se klikna na tlačítko Napsat a lze pokračovat v psaní v pohodlném Html editoru.

A to je vše. Snad jen ukázka, jak vypadal například tisk před úpravou:

a jak prokoukl po úpravě a přizpůsobení CSS: