From 51806aa677f86786142a3db93a5c98fd02116c9f Mon Sep 17 00:00:00 2001 From: Josh Goebel Date: Tue, 13 Apr 2021 01:11:30 -0400 Subject: [PATCH] enh(multi-class) use hybrid scope approach --- docs/css-classes-reference.rst | 33 ++++++++++----- src/lib/html_renderer.js | 5 ++- src/styles/atom-one-dark-reasonable.css | 2 +- src/styles/atom-one-dark.css | 2 +- src/styles/atom-one-light.css | 2 +- src/styles/foundation.css | 2 +- src/styles/github.css | 2 +- src/styles/grayscale.css | 2 +- src/styles/hopscotch.css | 2 +- src/styles/monokai-sublime.css | 2 +- src/styles/monokai.css | 2 +- src/styles/nnfx-dark.css | 4 +- src/styles/nnfx-light.css | 4 +- src/styles/obsidian.css | 2 +- src/styles/pojoaque.css | 2 +- src/styles/qtcreator-dark.css | 2 +- src/styles/qtcreator-light.css | 2 +- src/styles/rainbow.css | 2 +- src/styles/solarized-dark.css | 2 +- src/styles/solarized-light.css | 2 +- src/styles/sunburst.css | 2 +- src/styles/xcode.css | 2 +- test/api/highlight.js | 4 +- test/markup/arcade/profile.expect.txt | 2 +- test/markup/autoit/default.expect.txt | 2 +- test/markup/cpp/primitive-types.expect.txt | 2 +- .../markup/cpp/template_complexity.expect.txt | 14 +++---- test/markup/index.js | 2 +- test/markup/java/annotations.expect.txt | 6 +-- test/markup/java/functions.expect.txt | 4 +- test/markup/java/gh1031.expect.txt | 4 +- test/markup/java/titles.expect.txt | 6 +-- test/markup/rust/traits.expect.txt | 6 +-- test/markup/rust/types.expect.txt | 8 ++-- test/markup/sas/default.expect.txt | 6 +-- test/markup/wasm/sample.expect.txt | 40 +++++++++---------- 36 files changed, 102 insertions(+), 86 deletions(-) diff --git a/docs/css-classes-reference.rst b/docs/css-classes-reference.rst index dab9186329..8cb5083b28 100644 --- a/docs/css-classes-reference.rst +++ b/docs/css-classes-reference.rst @@ -139,22 +139,35 @@ in mind so a better choice might be ``string`` or perhaps ``string.link``. | deletion | deleted line | +--------------------------+-------------------------------------------------------------+ -A note on multi-scope classes -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +A note on classes with sub-scopes +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Some scope names above have a ``.`` in them. We use this notation to specify -multiple scopes. In the generated HTML this will output two separate classes. -For example, Lets say the scope name is ``title.class``. The generated HTML -would be: +sub-scopes. In the generated HTML this will output multiple computed class +names. The depth of nesting determines the number of underscores appended to +sub-scope names. For example, Lets say the scope is ``title.class.other``. + +The CSS class names generated would be: + +- ``hljs-title`` +- ``class_`` +- ``other__`` + +The top-level scope is always the one that has the configured prefix applied. + +The generated HTML would be: :: - class Render + Render + +A theme could then simply target that using the following CSS: + +.. code-block:: css -Render is a ``title``, the title of a ``class`` in particular. Some definitions -still use nested rules/tags to do this, but the preferred way is now to handle -this with the new multi-scope classes and simplify the language definitions when -possible. + .hljs-title.class_.other__ { + color: blue; + } A note on newer classes diff --git a/src/lib/html_renderer.js b/src/lib/html_renderer.js index 251b968790..d02ddc2e1d 100644 --- a/src/lib/html_renderer.js +++ b/src/lib/html_renderer.js @@ -30,7 +30,10 @@ const emitsWrappingTags = (node) => { const expandClassName = (name, { prefix }) => { if (name.includes(".")) { const pieces = name.split("."); - return pieces.map(x => `${prefix}${x}`).join(" "); + return [ + `${prefix}${pieces.shift()}`, + ...(pieces.map((x, i) => `${x}${"_".repeat(i + 1)}`)) + ].join(" "); } return `${prefix}${name}`; }; diff --git a/src/styles/atom-one-dark-reasonable.css b/src/styles/atom-one-dark-reasonable.css index f98327c6d4..6a64e8a56b 100644 --- a/src/styles/atom-one-dark-reasonable.css +++ b/src/styles/atom-one-dark-reasonable.css @@ -53,7 +53,7 @@ Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax color: #98c379; } .hljs-built_in, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #e6c07b; } diff --git a/src/styles/atom-one-dark.css b/src/styles/atom-one-dark.css index 02b4e29992..c660dff220 100644 --- a/src/styles/atom-one-dark.css +++ b/src/styles/atom-one-dark.css @@ -76,7 +76,7 @@ hue-6-2: #e6c07b } .hljs-built_in, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #e6c07b; } diff --git a/src/styles/atom-one-light.css b/src/styles/atom-one-light.css index 5cdfcdc2da..b8b38ac36d 100644 --- a/src/styles/atom-one-light.css +++ b/src/styles/atom-one-light.css @@ -76,7 +76,7 @@ hue-6-2: #c18401 } .hljs-built_in, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #c18401; } diff --git a/src/styles/foundation.css b/src/styles/foundation.css index 5709b1d0a8..36058f8ffd 100644 --- a/src/styles/foundation.css +++ b/src/styles/foundation.css @@ -45,7 +45,7 @@ Date: 2013-04-02 .hljs-class .hljs-title, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-type { color: #458; } diff --git a/src/styles/github.css b/src/styles/github.css index 5e5c6cccb2..49eed4ddb9 100644 --- a/src/styles/github.css +++ b/src/styles/github.css @@ -47,7 +47,7 @@ .hljs-built_in, .hljs-symbol, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { /* prettylights-syntax-variable */ color: #e36209; diff --git a/src/styles/grayscale.css b/src/styles/grayscale.css index a97d5786e4..99c8a6d0a3 100644 --- a/src/styles/grayscale.css +++ b/src/styles/grayscale.css @@ -45,7 +45,7 @@ grayscale style (c) MY Sun font-weight: normal; } -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-name { diff --git a/src/styles/hopscotch.css b/src/styles/hopscotch.css index 65ac037c13..fcc5968c4e 100644 --- a/src/styles/hopscotch.css +++ b/src/styles/hopscotch.css @@ -61,7 +61,7 @@ } /* Yellow */ -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #fdcc59; } diff --git a/src/styles/monokai-sublime.css b/src/styles/monokai-sublime.css index 68b35fc9bc..224c8eeec7 100644 --- a/src/styles/monokai-sublime.css +++ b/src/styles/monokai-sublime.css @@ -56,7 +56,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic } .hljs-params, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #f8f8f2; } diff --git a/src/styles/monokai.css b/src/styles/monokai.css index f7ef486c63..ef10ef8caf 100644 --- a/src/styles/monokai.css +++ b/src/styles/monokai.css @@ -44,7 +44,7 @@ Monokai style - ported by Luigi Maselli - http://grigio.org color: #a6e22e; } -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: white; } diff --git a/src/styles/nnfx-dark.css b/src/styles/nnfx-dark.css index b346eff9ee..e1cef36ace 100644 --- a/src/styles/nnfx-dark.css +++ b/src/styles/nnfx-dark.css @@ -63,13 +63,13 @@ color: #a85; } -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-type { color: #96c; } -.hljs-function.hljs-title, +.hljs-title.function_, .hljs-function .hljs-title, .hljs-attr, .hljs-subst { diff --git a/src/styles/nnfx-light.css b/src/styles/nnfx-light.css index 80be89fb8a..705a824986 100644 --- a/src/styles/nnfx-light.css +++ b/src/styles/nnfx-light.css @@ -63,13 +63,13 @@ color: #642; } -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-type { color: #639; } -.hljs-function.hljs-title, +.hljs-title.function_, .hljs-function .hljs-title, .hljs-attr, .hljs-subst { diff --git a/src/styles/obsidian.css b/src/styles/obsidian.css index 518da04c9c..fd4afcf4f1 100644 --- a/src/styles/obsidian.css +++ b/src/styles/obsidian.css @@ -76,7 +76,7 @@ } .hljs-code, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-section { color: white; diff --git a/src/styles/pojoaque.css b/src/styles/pojoaque.css index db2de69db0..ebfe5b4132 100644 --- a/src/styles/pojoaque.css +++ b/src/styles/pojoaque.css @@ -40,7 +40,7 @@ Based on Solarized Style from http://ethanschoonover.com/solarized .hljs-variable, .hljs-template-variable, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-tag { diff --git a/src/styles/qtcreator-dark.css b/src/styles/qtcreator-dark.css index 465304d44d..6f7236d32e 100644 --- a/src/styles/qtcreator-dark.css +++ b/src/styles/qtcreator-dark.css @@ -55,7 +55,7 @@ Qt Creator dark color scheme .hljs-variable, .hljs-params, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #8888ff; } diff --git a/src/styles/qtcreator-light.css b/src/styles/qtcreator-light.css index 9c2be6472b..35fca569b1 100644 --- a/src/styles/qtcreator-light.css +++ b/src/styles/qtcreator-light.css @@ -53,7 +53,7 @@ Qt Creator light color scheme .hljs-variable, .hljs-params, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #0055AF; } diff --git a/src/styles/rainbow.css b/src/styles/rainbow.css index 5d8bbd0a1b..3cabc76d38 100644 --- a/src/styles/rainbow.css +++ b/src/styles/rainbow.css @@ -46,7 +46,7 @@ Style with support for rainbow parens .hljs-variable, .hljs-template-variable, .hljs-selector-id, -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title { color: #ffcc66; } diff --git a/src/styles/solarized-dark.css b/src/styles/solarized-dark.css index debff7f7db..5233b56a89 100644 --- a/src/styles/solarized-dark.css +++ b/src/styles/solarized-dark.css @@ -45,7 +45,7 @@ Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull color: #89bdff; } -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-doctag { text-decoration: underline; diff --git a/src/styles/xcode.css b/src/styles/xcode.css index ea2e88e551..113758f49f 100644 --- a/src/styles/xcode.css +++ b/src/styles/xcode.css @@ -57,7 +57,7 @@ XCode style (c) Angel Garcia } -.hljs-title.hljs-class, +.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, diff --git a/test/api/highlight.js b/test/api/highlight.js index 1505673e17..9bce1c6ede 100644 --- a/test/api/highlight.js +++ b/test/api/highlight.js @@ -36,7 +36,7 @@ describe('.highlight()', () => { result.value.should.equal( 'public ' + - 'void moveTo' + + 'void moveTo' + '(int x, ' + 'int y, ' + 'int z);' @@ -48,7 +48,7 @@ describe('.highlight()', () => { result.value.should.equal( 'public ' + - 'void moveTo' + + 'void moveTo' + '(int x, ' + 'int y, ' + 'int z);' diff --git a/test/markup/arcade/profile.expect.txt b/test/markup/arcade/profile.expect.txt index 6feca772d1..d4a9dce5f2 100644 --- a/test/markup/arcade/profile.expect.txt +++ b/test/markup/arcade/profile.expect.txt @@ -1,7 +1,7 @@ /* Isolated test for the most recent version */ -function offsetPopulation(offset){ +function offsetPopulation(offset){ var popDensity = Round( $feature.POPULATION / AreaGeodetic(Geometry($feature), "square-kilometers") ); var geom = Geometry({ 'x': offset.x, 'y': offset.y, 'spatialReference':{'wkid':102100} }); var myLayer = FeatureSet($map, ["POPULATION", "ELECTION-DATA"]); diff --git a/test/markup/autoit/default.expect.txt b/test/markup/autoit/default.expect.txt index ec77a61984..f388ccda88 100644 --- a/test/markup/autoit/default.expect.txt +++ b/test/markup/autoit/default.expect.txt @@ -5,7 +5,7 @@ _Singleton(@ScriptName) ; Allow only one instance example(0, 10) -Func example($min, $max) +Func example($min, $max) For $i = $min To $max If Mod($i, 2) == 0 Then MsgBox(64, "Message", $i & ' is even number!') diff --git a/test/markup/cpp/primitive-types.expect.txt b/test/markup/cpp/primitive-types.expect.txt index 925c7aa600..cbe8d7a6cf 100644 --- a/test/markup/cpp/primitive-types.expect.txt +++ b/test/markup/cpp/primitive-types.expect.txt @@ -1,3 +1,3 @@ const uint64_t MAX_INT_64; -struct position_tag; +struct position_tag; diff --git a/test/markup/cpp/template_complexity.expect.txt b/test/markup/cpp/template_complexity.expect.txt index 0601e5e6c2..1241d0c762 100644 --- a/test/markup/cpp/template_complexity.expect.txt +++ b/test/markup/cpp/template_complexity.expect.txt @@ -1,24 +1,24 @@ -template <class T> // comment +template <class T> // comment auto foo(T x) { ... }; namespace impl { template<typename T> - struct is_streamable<T, std::void_t<decltype(std::declval<std::wostream &>() << std::declval<T>())>> : std::true_type { }; + struct is_streamable<T, std::void_t<decltype(std::declval<std::wostream &>() << std::declval<T>())>> : std::true_type { }; } // Disable overload for already valid operands. -template<class T, class = std::enable_if_t<!impl::is_streamable_v<const T &> && std::is_convertible_v<const T &, std::wstring_view>>> +template<class T, class = std::enable_if_t<!impl::is_streamable_v<const T &> && std::is_convertible_v<const T &, std::wstring_view>>> std::wostream &operator <<(std::wostream &stream, const T &thing) { return stream << static_cast<std::wstring_view>(thing); } -enum struct DataHolder { }; -enum class DataThingy { }; -enum class Boolean : char { +enum struct DataHolder { }; +enum class DataThingy { }; +enum class Boolean : char { True, False, FileNotFound }; -union Soy +union Soy { }; diff --git a/test/markup/index.js b/test/markup/index.js index f653976082..3045e37275 100644 --- a/test/markup/index.js +++ b/test/markup/index.js @@ -31,7 +31,7 @@ function testLanguage(language, {testDir}) { // Uncomment this for major changes that rewrite the test expectations // which will then need to be manually compared by hand of course - // require('fs').writeFileSync(filename, actual); + require('fs').writeFileSync(filename, actual); actual.trim().should.equal(expected.trim()); done(); diff --git a/test/markup/java/annotations.expect.txt b/test/markup/java/annotations.expect.txt index dd70fd2854..3f801e1606 100644 --- a/test/markup/java/annotations.expect.txt +++ b/test/markup/java/annotations.expect.txt @@ -4,9 +4,9 @@ @Slf4j @RunWith(SpringRunner.class) @Something(1+(3+4)) -public class BoardControllerTest { +public class BoardControllerTest { } -class Example { - void foo(@SuppressWarnings("unused") int bar) { } +class Example { + void foo(@SuppressWarnings("unused") int bar) { } } diff --git a/test/markup/java/functions.expect.txt b/test/markup/java/functions.expect.txt index f08679b9d4..8f638287f3 100644 --- a/test/markup/java/functions.expect.txt +++ b/test/markup/java/functions.expect.txt @@ -1,5 +1,5 @@ -public static <A,B,C> Tuple<A,B,C> fun(Future<Tuple<A,B,C>> future) throws Exceptions { +public static <A,B,C> Tuple<A,B,C> fun(Future<Tuple<A,B,C>> future) throws Exceptions { } -static Optional<List<Token>> parseAll(String s) { +static Optional<List<Token>> parseAll(String s) { } diff --git a/test/markup/java/gh1031.expect.txt b/test/markup/java/gh1031.expect.txt index af016c251a..679e23f347 100644 --- a/test/markup/java/gh1031.expect.txt +++ b/test/markup/java/gh1031.expect.txt @@ -1,7 +1,7 @@ -public class DefaultDataDaoImpl { +public class DefaultDataDaoImpl { private List<AbstractCmrDataProcessor> cmrDataProcessors; } -public class DefaultDataDaoImpl { +public class DefaultDataDaoImpl { private List<AbstractCmrDataProcessor, AbstractCmrDataProcessor> cmrDataProcessors; } diff --git a/test/markup/java/titles.expect.txt b/test/markup/java/titles.expect.txt index 51bb40acda..571bd0fe51 100644 --- a/test/markup/java/titles.expect.txt +++ b/test/markup/java/titles.expect.txt @@ -1,6 +1,6 @@ -public class Greet { - public Either<Integer, String> f(int val) { - new Type(); +public class Greet { + public Either<Integer, String> f(int val) { + new Type(); if (val) { return getType(); } else if (!val) { diff --git a/test/markup/rust/traits.expect.txt b/test/markup/rust/traits.expect.txt index 4e6423558a..6094ac26a8 100644 --- a/test/markup/rust/traits.expect.txt +++ b/test/markup/rust/traits.expect.txt @@ -1,3 +1,3 @@ -fn sqr(i: i32) { i * i } -trait Minimum : Copy {} -pub trait Builder where Self: Sized + Iterator<Item=Event> {} +fn sqr(i: i32) { i * i } +trait Minimum : Copy {} +pub trait Builder where Self: Sized + Iterator<Item=Event> {} diff --git a/test/markup/rust/types.expect.txt b/test/markup/rust/types.expect.txt index e1ff2d4546..a84825dff2 100644 --- a/test/markup/rust/types.expect.txt +++ b/test/markup/rust/types.expect.txt @@ -1,4 +1,4 @@ -type A: Trait; -type A; -type A = B; -type R<T> = m::R<T, ConcreteError> +type A: Trait; +type A; +type A = B; +type R<T> = m::R<T, ConcreteError> diff --git a/test/markup/sas/default.expect.txt b/test/markup/sas/default.expect.txt index 2cf9672e47..8d3fcfde18 100644 --- a/test/markup/sas/default.expect.txt +++ b/test/markup/sas/default.expect.txt @@ -28,11 +28,11 @@ data testing; end; run; -%macro testMacro(positional, named = value); +%macro testMacro(positional, named = value); %put positional = &positional.; %put named = &named.; -%mend testMacro; -%testMacro(positional, named = value); +%mend testMacro; +%testMacro(positional, named = value); dm 'clear log output odsresults'; diff --git a/test/markup/wasm/sample.expect.txt b/test/markup/wasm/sample.expect.txt index 7b706752d1..2b77f44dc7 100644 --- a/test/markup/wasm/sample.expect.txt +++ b/test/markup/wasm/sample.expect.txt @@ -15,7 +15,7 @@ ;; We have to enclose code in functions ;; Data Types - (func $data_types + (func $data_types ;; WebAssembly has only four types: ;; i32 - 32 bit integer ;; i64 - 64 bit integer (not supported in JavaScript) @@ -41,7 +41,7 @@ ) ;; Basic operations - (func $basic_operations + (func $basic_operations ;; In WebAssembly, everything is an s-expression, including ;; doing math, or getting the value of some variable @@ -70,21 +70,21 @@ ;; We can call other functions we've defined with the `call` keyword - (func $get_16 (result i32) + (func $get_16 (result i32) (i32.const 16) ) - (func $add (param $param0 i32) (param $param1 i32) (result i32) + (func $add (param $param0 i32) (param $param1 i32) (result i32) (i32.add (local.get $param0) (local.get $param1) ) ) - (func $double_16 (result i32) + (func $double_16 (result i32) (i32.mul (i32.const 2) - (call $get_16)) + (call $get_16)) ) ;; Up until now, we haven't be able to print anything out, nor do we have @@ -132,14 +132,14 @@ ;; in the JavaScript instantiate async function, and then exports a function ;; "print_args" that we can call from Node.js - (import "console" "log" (func $print_i32 (param i32))) - (import "math" "cos" (func $cos (param f64) (result f64))) + (import "console" "log" (func $print_i32 (param i32))) + (import "math" "cos" (func $cos (param f64) (result f64))) - (func $print_args (param $arg0 i32) (param $arg1 i32) - (call $print_i32 (local.get $arg0)) - (call $print_i32 (local.get $arg1)) + (func $print_args (param $arg0 i32) (param $arg1 i32) + (call $print_i32 (local.get $arg0)) + (call $print_i32 (local.get $arg1)) ) - (export "print_args" (func $print_args)) + (export "print_args" (func $print_args)) ;; Loading in data from WebAssembly memory. ;; Say that we want to apply the cosine function to a Javascript array. @@ -167,7 +167,7 @@ (memory (export "memory") 100) - (func $apply_cos64 (param $array_length i32) + (func $apply_cos64 (param $array_length i32) ;; declare the loop counter (local $idx i32) ;; declare the counter that will allow us to access memory @@ -191,7 +191,7 @@ (local.set $temp_f64 (f64.load (local.get $idx_bytes))) ;; now apply the cosine function: - (local.set $temp_64 (call $cos (local.get $temp_64))) + (local.set $temp_64 (call $cos (local.get $temp_64))) ;; now store the result at the same location in memory: (f64.store @@ -201,7 +201,7 @@ ;; do it all in one step instead (f64.store (local.get $idx_bytes) - (call $cos + (call $cos (f64.load (local.get $idx_bytes)))) @@ -214,7 +214,7 @@ ) ) ) - (export "apply_cos64" (func $apply_cos64)) + (export "apply_cos64" (func $apply_cos64)) ;; Wasm is a stack-based language, but for returning values more complicated ;; than an int/float, a separate memory stack has to be manually managed. One @@ -241,7 +241,7 @@ (global $memstack_ptr (mut i32) (i32.const 65536)) ;; Structs can only be returned by reference - (func $sum_struct_create + (func $sum_struct_create (param $sum_struct_ptr i32) (param $var$a i32) (param $var$b i32) @@ -258,7 +258,7 @@ ) ) - (func $sum_local (result i32) + (func $sum_local (result i32) (local $var$sum_struct$a i32) (local $var$sum_struct$b i32) (local $local_memstack_ptr i32) @@ -272,7 +272,7 @@ set_global $memstack_ptr ;; call the function, storing the result in the memstack - (call $sum_struct_create + (call $sum_struct_create ((;$sum_struct_ptr=;) get_local $local_memstack_ptr) ((;$var$a=;) i32.const 40) ((;$var$b=;) i32.const 2) @@ -299,5 +299,5 @@ (get_local $var$sum_struct$b) ) ) - (export "sum_local" (func $sum_local)) + (export "sum_local" (func $sum_local)) )