Change the look of code blocks

rage · Dec 18, 2018 · 60167ea · 60167ea
1 parent 64f01b2
commit 60167ea
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 86 deletions.
diff --git a/data/osa-1/2-tulostaminen-ja-lukeminen.md b/data/osa-1/2-tulostaminen-ja-lukeminen.md
@@ -318,7 +318,7 @@ public class Ohjelma {
     public static void main(String[] args) {
         // Tänne voit kirjoittaa ohjelmakoodia. Ohjelmasi voit ajaa
         // valitsemalla menusta Run->Run File tai painamalla Shift+F6
-    
+
 }
 ```
 
@@ -389,14 +389,14 @@ Merkkijonoliteraalin voi asettaa myös merkkijonomuotoisen muuttujan arvoksi. Mu
 Merkkijonomuotoinen muuttuja nimeltä `viesti`, jonka arvona on merkkijono "Hei maailma!", luodaan seuraavasti.
 
 ```java
-  String viesti = "Hei maailma!";
+String viesti = "Hei maailma!";
 ```
 
 Muuttujan luominen luo ohjelman käyttöön paikan, jonka sisältöön voi myöhemmin viitata. Viittaaminen tapahtuu muuttujan nimen avulla. Esimerkiksi merkkijonomuuttujan luominen ja tulostaminen tapahtuu seuraavalla tavalla.
 
 ```java
-  String viesti = "Hei maailma!";
-  System.out.println(viesti);
+String viesti = "Hei maailma!";
+System.out.println(viesti);
 ```
 
 <sample-output>
@@ -408,8 +408,8 @@ Hei maailma!
 Mikäli ohjelmassa olisi hipsut merkkijonomuuttujan `viesti` nimen ympärillä, tulostaisi ohjelma tekstin "viesti" muuttujan `viesti` arvon eli tekstin "Hei maailma!" sijaan.
 
 ```java
-  String viesti = "Hei maailma!";
-  System.out.println("viesti");
+String viesti = "Hei maailma!";
+System.out.println("viesti");
 ```
 
 <sample-output>
@@ -423,14 +423,14 @@ viesti
 Tehtäväpohjassa on seuraavanlainen ohjelmarunko:
 
 ```java
-    public class PassiJaHammasharja {
+public class PassiJaHammasharja {
 
-        public static void main(String[] args) {
-          String viesti = "Passi ja hammaslanka";
+    public static void main(String[] args) {
+        String viesti = "Passi ja hammaslanka";
 
-          System.out.println(viesti);
-        }
+        System.out.println(viesti);
     }
+}
 ```
 
 Ohjelman suorittaminen tulostaa seuraavan tekstin.
@@ -455,25 +455,25 @@ Passi ja hammasharja
 Tulostettavan merkkijonon voi koostaa useammista merkkijonoista `+`-merkin avulla. Esimerkiksi alla oleva ohjelma tulostaa viestin "Hei maailma!" yhdelle riville.
 
 ```java
-  public class Ohjelma {
+public class Ohjelma {
 
-      public static void main(String[] args) {
-          System.out.println("Hei " + "maailma!");
-      }
-  }
+    public static void main(String[] args) {
+        System.out.println("Hei " + "maailma!");
+    }
+}
 ```
 
 Edellistä esimerkkiä noudattaen myös merkkijonomuuttujan arvon ja merkkijonoliteraalin arvo voidaan yhdistää.
 
 ```java
-  public class Ohjelma {
+public class Ohjelma {
 
-      public static void main(String[] args) {
-          String viesti = "Hei maailma!";
+    public static void main(String[] args) {
+        String viesti = "Hei maailma!";
 
-          System.out.println(viesti + "\n... ja maailmankaikkeus!");
-      }
-  }
+        System.out.println(viesti + "\n... ja maailmankaikkeus!");
+    }
+}
 ```
 
 <sample-output>
@@ -485,15 +485,15 @@ Hei maailma!
 Sama onnistuu myös useammalla osalla.
 
 ```java
-  public class Ohjelma {
+public class Ohjelma {
 
-      public static void main(String[] args) {
-          String alku = "My name is ";
-          String loppu = ", James Bond";
+    public static void main(String[] args) {
+        String alku = "My name is ";
+        String loppu = ", James Bond";
 
-          System.out.println(alku + "Bond" + loppu);
-      }
-  }
+        System.out.println(alku + "Bond" + loppu);
+    }
+}
 ```
 
 <sample-output>
@@ -528,13 +528,13 @@ kolme
 Tehtäväpohjassa on seuraavanlainen ohjelma.
 
 ```java
-    public class HeiAdaLovelace {
+public class HeiAdaLovelace {
 
-        public static void main(String[] args) {
-            String nimi = "Ada Lovelace";
+    public static void main(String[] args) {
+        String nimi = "Ada Lovelace";
 
-        }
     }
+}
 ```
 
 Muokkaa ohjelmaa siten, että ohjelmassa tulostetaan muuttujan `nimi` sisältö, ja että ohjelman tulostus on kokonaisuudessaan muotoa:
@@ -554,42 +554,42 @@ Huom! Kun käytät `System.out.println`-komentoa, älä kirjoita komentoon merkk
 Tutustutaan syötteen lukemiseen käyttäjältä. Syötteen lukemiseen käytetään Javan valmista `Scanner`-apuvälinettä. Apuväline tuodaan käyttöön lisäämällä komento `import java.util.Scanner;` ennen pääohjelmarungon aloitusta (`public class` ...), ja se luodaan komennolla `Scanner lukija = new Scanner(System.in);`. Tarkemmin ottaen tässä luodaan _lukija_-niminen muuttuja, jota voidaan jatkossa käyttää käyttäjän kirjoittaman tekstin lukemiseen.
 
 ```java
-  import java.util.Scanner;
+import java.util.Scanner;
 
-  public class Ohjelma {
+public class Ohjelma {
 
-      public static void main(String[] args) {
-          Scanner lukija = new Scanner(System.in);
+    public static void main(String[] args) {
+        Scanner lukija = new Scanner(System.in);
 
-          // ohjelmakoodi
-      }
-  }
+        // ohjelmakoodi
+    }
+}
 ```
 
 Älä hätäile vaikka pääohjelmarunko saattaa näyttää vaikeaselkoiselta! Jatkamme yhä ohjelmointia kommentilla _ohjelmakoodi_ merkittyyn kohtaan.
 
 Merkkijonon lukeminen käyttäjältä onnistuu `lukija`-muuttujaan liittyvällä komennolla `nextLine()`. Mikäli käyttäjän syöttämä teksti halutaan tallentaa, tulee sitä varten esitellä merkkijonomuuttuja. Alla on esitelty ohjelma, joka kysyy käyttäjältä syötettä, lukee käyttäjän syöttämän merkkijonon, ja lopulta tulostaa käyttäjän syöttämän merkkijonon.
 
 ```java
-  // Tuodaan lukemiseen käytettävä Scanner-apuväline käyttöön
-  import java.util.Scanner;
+// Tuodaan lukemiseen käytettävä Scanner-apuväline käyttöön
+import java.util.Scanner;
 
-  public class Ohjelma {
+public class Ohjelma {
 
-      public static void main(String[] args) {
-          // Luodaan lukemiseen käytettävä apuväline, jonka nimeksi tulee lukija
-          Scanner lukija = new Scanner(System.in);
+    public static void main(String[] args) {
+        // Luodaan lukemiseen käytettävä apuväline, jonka nimeksi tulee lukija
+        Scanner lukija = new Scanner(System.in);
 
-          // Tulostetaan käyttäjälle viesti "Syötä viesti: "
-          System.out.println("Syötä viesti: ");
+        // Tulostetaan käyttäjälle viesti "Syötä viesti: "
+        System.out.println("Syötä viesti: ");
 
-          // Luetaan käyttäjän syöttämä merkkijono ja asetetaan se muuttujan viesti arvoksi
-          String viesti = lukija.nextLine();
+        // Luetaan käyttäjän syöttämä merkkijono ja asetetaan se muuttujan viesti arvoksi
+        String viesti = lukija.nextLine();
 
-          // Tulostetaan muuttujan viesti sisältö
-          System.out.println(viesti);
-      }
-  }
+        // Tulostetaan muuttujan viesti sisältö
+        System.out.println(viesti);
+    }
+}
 ```
 
 Jatkossa tulostusesimerkkeihin merkitään käyttäjän syöttämä syöte punaisella värillä. Mikäli käyttäjä syöttäisi ohjelmaan tekstin "Hei maailma", olisi ohjelman suoritus seuraavanlainen.
@@ -605,20 +605,20 @@ Hei maailma
 Alla sama esimerkki, mutta siten, että käyttäjän syöttämä merkkijono tulostetaan tekstin "Viestisi oli " jälkeen.
 
 ```java
-  import java.util.Scanner;
+import java.util.Scanner;
 
-  public class Ohjelma {
+public class Ohjelma {
 
-      public static void main(String[] args) {
-          Scanner lukija = new Scanner(System.in);
+    public static void main(String[] args) {
+        Scanner lukija = new Scanner(System.in);
 
-          System.out.println("Syötä viesti: ");
+        System.out.println("Syötä viesti: ");
 
-          String viesti = lukija.nextLine();
+        String viesti = lukija.nextLine();
 
-          System.out.println("Viestisi oli " + viesti);
-      }
-  }
+        System.out.println("Viestisi oli " + viesti);
+    }
+}
 ```
 
  <sample-output>
@@ -638,17 +638,17 @@ Kirjoita ohjelma, joka pyytää käyttäjää kirjoittamaan merkkijonon. Kun kä
 Tehtäväpohjan mukana tulee runko, joka sisältää Scanner-apuvälineen luomisen.
 
 ```java
-    import java.util.Scanner;
+import java.util.Scanner;
 
-    public class Viesti {
+public class Viesti {
 
-        public static void main(String[] args) {
-            Scanner lukija = new Scanner(System.in);
+    public static void main(String[] args) {
+        Scanner lukija = new Scanner(System.in);
 
-            System.out.println("Kirjoita merkkijono!");
-            // toteuta ohjelma tänne
-        }
+        System.out.println("Kirjoita merkkijono!");
+        // toteuta ohjelma tänne
     }
+}
 ```
 
 Tulostusesimerkki kun käyttäjä syöttää merkkijonon "Heippa".
@@ -680,17 +680,17 @@ Kirjoita ohjelma, joka pyytää käyttäjää kirjoittamaan merkkijonon. Kun kä
 Tehtäväpohjan mukana tulee runko, joka sisältää Scanner-apuvälineen luomisen.
 
 ```java
-    import java.util.Scanner;
+import java.util.Scanner;
 
-    public class ViestiKolmesti {
+public class ViestiKolmesti {
 
-        public static void main(String[] args) {
-            Scanner lukija = new Scanner(System.in);
+    public static void main(String[] args) {
+        Scanner lukija = new Scanner(System.in);
 
-            System.out.println("Kirjoita merkkijono!");
-            // toteuta ohjelma tänne
-        }
+        System.out.println("Kirjoita merkkijono!");
+        // toteuta ohjelma tänne
     }
+}
 ```
 
 Tulostusesimerkki kun käyttäjä syöttää merkkijonon "Heippa".
@@ -726,16 +726,16 @@ Kirjoita ohjelma, joka kysyy käyttäjältä nimeä käyttäen tekstiä "Mikä o
 Tehtäväpohjan mukana tulee runko, joka sisältää Scanner-apuvälineen luomisen.
 
 ```java
-    import java.util.Scanner;
+import java.util.Scanner;
 
-    public class Nimi {
+public class Nimi {
 
-        public static void main(String[] args) {
-            Scanner lukija = new Scanner(System.in);
+    public static void main(String[] args) {
+        Scanner lukija = new Scanner(System.in);
 
-            // toteuta ohjelma tänne
-        }
+        // toteuta ohjelma tänne
     }
+}
 ```
 
 Tulostusesimerkki kun käyttäjä syöttää nimeksi Ada.

diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -5,4 +5,4 @@
  */
 
  // You can delete this file if you're not using it
-require("prismjs/themes/prism-tomorrow.css")
+require("prismjs/themes/prism.css")
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "tmc-client-js": "0.0.9",
     "typeface-open-sans": "0.0.54",
     "typeface-open-sans-condensed": "0.0.54",
+    "typeface-roboto-mono": "0.0.54",
     "typeface-roboto-slab": "0.0.54",
     "uuid": "^3.3.2",
     "visibilityjs": "^2.0.2"

diff --git a/src/templates/Layout.js b/src/templates/Layout.js
@@ -14,6 +14,7 @@ import './remark.css'
 import 'focus-visible'
 import 'typeface-open-sans'
 import 'typeface-roboto-slab'
+import 'typeface-roboto-mono'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 
 import { config as fontAwesomeConfig } from '@fortawesome/fontawesome-svg-core'

diff --git a/src/templates/remark.css b/src/templates/remark.css
@@ -1,3 +1,7 @@
+code {
+  font-family: 'Roboto Mono', monospace;
+}
+
 .gatsby-highlight {
   margin-bottom: 2rem;
 }
@@ -12,8 +16,18 @@ code.language-text {
   padding-left: 0.4rem !important;
 }
 
+code, pre {
+  background-color: white !important;
+}
+
+pre {
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
+
+/* //  */
+
 :not(pre) > code[class*='language-'] {
-  background-color: rgba(255, 229, 100, 0.2) !important;
-  color: rgb(26, 26, 26);
+  background-color: rgb(243, 243, 243) !important;
+  color: rgb(20, 20, 20) !important;
   white-space: pre;
 }