port code changes

Author: iliakan

modules/styles/blocks/prism/01-prism.styl

@@ -1,20 +1,14 @@
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code[class*="language-"],
-pre[class*="language-"]
-    color black
+pre[class*="language-"],
+pre[class*="language-"] > code,
+    color #d4d4d4
+    // text-shadow 0 1px white
     font-family fixed_width_font
     direction ltr
     text-align left
     white-space pre
     word-spacing normal
     tab-size 4
     hyphens none
-    position relative
 
 /*
 In epub all code selected? because Calibre applies this style wrong?
@@ -30,23 +24,32 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection
 */
 
 @media print
-    code[class*="language-"],
-    pre[class*="language-"]
+    pre[class*="language-"],
+    pre[class*="language-"] > code
         text-shadow: none
 
+
 /* Code blocks */
 pre[class*="language-"]
-    padding 1em
+    padding 0
     margin 1.5em 0
     overflow auto
+    background #f7f4f3
 
-pre[class*="language-"]
-    background: background_blocks
+    if isRTL
+        code
+            unicode-bidi normal
+            direction unset
 
 /* Inline code */
-:not(pre) > code[class*="language-"]
+code[class*="language-"]
     padding .1em
     border-radius .3em
+    color #313130
+    background #f7f4f3
+
+.namespace
+  opacity .7
 
 .token.comment,
 .token.prolog,
@@ -103,3 +106,14 @@ pre[class*="language-"]
 
 .token.entity
     cursor help
+
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"]
+  position relative
+  z-index 1
+
+.line-highlight.line-highlight
+  background var(--backgroundPrismLineHighlight)
+  z-index 0

modules/styles/blocks/prism/03-prism-line-numbers.styl

@@ -1,17 +1,11 @@
 pre.line-numbers
-  position relative
-  if isRTL
-    padding-right 3.8em
-  else
-    padding-left 3.8em
   counter-reset linenumber
+  display flex
+  flex-direction row
 
 .line-numbers .line-numbers-rows
-  position absolute
   pointer-events none
-  top 0
   font-size 100%
-  left -3.8em
   width 3em /* works for line-numbers below 1000 lines */
   letter-spacing -1px
   border-right 1px solid light_gray_color

modules/styles/blocks/prism/04-my-prism.styl

@@ -1,34 +1,35 @@
 pre[class*="language-"],
 code[class*="language-"]
-  font 14px/17px fixed_width_font
+  font 15px/20px fixed_width_font
   z-index 0
   text-shadow none
   margin 0
 
+  //- line height must be the same to avoid jumps of svg arrowed illustrations
+  @media (min-width: largescreen)
+    font 16px/20px fixed_width_font
+
+  code.token
+    background inherit
+    padding 0
+
+
 pre[class*="language-"]
-  position relative
   > code.language-markup
     color inherit
-    position relative
 
   > code[class*="language-"]
     background none
-    padding 0
-
-pre.line-numbers
-  padding-left 3.5em
+    padding 1em 1em 1em 0.5em
+    flex-grow 1
 
-// span with line numbers is moved from <code> to the outer <pre>,
-// because we need to handle many <code>...</code> inside single <pre>
-// (this we need for highlighting *!*...* /!* inline
 .line-numbers .line-numbers-rows
-  left 0
-  top 0
-  padding 1em 0
+  padding 1em 0 .8em
   border 0
   background #e7e5e3
   width auto
 
+
 .line-numbers .line-numbers-rows:after
   width auto
   display block
@@ -39,13 +40,5 @@ pre.line-numbers
 .line-numbers-rows > span:before,
 .line-numbers .line-numbers-rows:after
   padding 0 .7em 0 .8em
-  background #e7e5e3 // #146 https://github.com/iliakan/javascript-nodejs/issues/146#issuecomment-72321753
+  // background  var(--backgroundAlt) // was s#e7e5e3 // #146 https://github.com/iliakan/javascript-nodejs/issues/146#issuecomment-72321753
   text-shadow none
-
-/* not sure if larger code is better
-@media (min-width: largescreen)
-  pre[class*="language-"],
-  code[class*="language-"]
-    font-size font_size_m
-    line-height 19px
-*/