From 60167ea00f0d8b4b9864687fe01c1225876fb512 Mon Sep 17 00:00:00 2001 From: Henrik Nygren Date: Tue, 18 Dec 2018 09:42:25 +0200 Subject: [PATCH] Change the look of code blocks --- data/osa-1/2-tulostaminen-ja-lukeminen.md | 166 +++++++++++----------- gatsby-browser.js | 2 +- package-lock.json | 5 + package.json | 1 + src/templates/Layout.js | 1 + src/templates/remark.css | 18 ++- 6 files changed, 107 insertions(+), 86 deletions(-) diff --git a/data/osa-1/2-tulostaminen-ja-lukeminen.md b/data/osa-1/2-tulostaminen-ja-lukeminen.md index e7909aa5..b7d9c540 100644 --- 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); ``` @@ -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"); ``` @@ -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!"); + } +} ``` @@ -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); + } +} ``` @@ -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,16 +554,16 @@ 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. @@ -571,25 +571,25 @@ Tutustutaan syötteen lukemiseen käyttäjältä. Syötteen lukemiseen käytetä 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); + } +} ``` @@ -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 index 5f794a75..484971d2 100644 --- 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 index 67e1d53e..fe6cbecc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17173,6 +17173,11 @@ "resolved": "https://registry.npmjs.org/typeface-open-sans-condensed/-/typeface-open-sans-condensed-0.0.54.tgz", "integrity": "sha512-WDBEKd4zYMZY9MS8N/JGLVyKeTKNjf9KkpdkdIGuzuezPErv2wzb3H1GtRAXtAeU1aFauZeZTcjoQbBG3dyFmA==" }, + "typeface-roboto-mono": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-roboto-mono/-/typeface-roboto-mono-0.0.54.tgz", + "integrity": "sha512-UjE3Y4Bk7DRA3m9aCN4pp8OOGFEYbJH2wK1Qj3Xv2TjEqEJo+oEmQcXwnt1/DKSYAWdKxSL3D/4ida7OoBFkwQ==" + }, "typeface-roboto-slab": { "version": "0.0.54", "resolved": "https://registry.npmjs.org/typeface-roboto-slab/-/typeface-roboto-slab-0.0.54.tgz", diff --git a/package.json b/package.json index f89f62fc..cab912d8 100644 --- 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 index ebba9856..00ca1669 100644 --- 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 index 6fa1e30e..d5b308a7 100644 --- 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; }