Web编程技术营地
研究、演示、创新

High Lighting all TrimPres in a Page

High lighting a certain source code is simple. However, when we need to high light all source coeds in a page, the situations are rather complexed. The following situations should be taken into account:

  1. high lighting different source codes
  2. deciding when and how to set a default language
  3. high lighting while running the codes
  4. the safe importing different modules without conflicts
  5. auto-responding to the switch of color theme

This page would embrace all of these situations to test our implementations work well.

Simple Usage

A line of codes would suffice to handle all situations:

<script type="module" src="/js/esm/web-widgets/trim-pre/highlight-with-trimpre.js"></script>

Basic trimpre

For a normal trim-pre, its' language would be decided by highlihgt.js automatically.

A CSS content:

body { color: #333; background-color: #666; }

JavaScript codes seems OK most of time.

function aFunc() { console.log('Hello'); }

Sepcify a default language

Unexpected result for some Python codes:

def bb(): print('This is python codes.');

If found, we can set a default language for the codes above to avoid the side-effect of auto-decided:

def bb(): print('This is python codes.');

And the result:

def bb(): print('This is python codes.');

Markdown is supported, yet an explicit specifying of language is needed:

# A Sample Article ## Section A This is a paragraph. ## Section B This is another paragraph.

PageConsoles

We set each of trim-pre which has the class of auto-pageconsole with the default language of javascript.

A pageconsole:

function sum(a, b) { return a + b; }

A pageconsole with extra-src attribute:

sayHello();

Another pageconsole:

let a = 5; let b = 10; let c = a + b;

By default, there are no default styles for HTML tags.

pc.appendHTMLStr(''); pc.appendHTMLStr('
12
');

This feature is useful if we want to set all initial CSS values from scratch.

By setting a use-predefined-styles attribute, we can use the pre-defined styles based on color schemes.

pc.appendHTMLStr(''); pc.appendHTMLStr('
12
');

Runnable Wasm codes

When a trim-pre has the class of auto-wabt，WabtUtils would be imported automatically, among with pc.

let watSrc = ` (module (func (export "sum") (param i32 i32) (result i32) local.get 0 local.get 1 i32.add ) ) `; const { sum } = await WabtUtils.RunWat(watSrc); pc.log(sum(5, 3));

Runnable Python codes

Where a trim-pre has the class of auto-brython，its' codes would be treated as Python and run.

name = 'Mike' age = 25 print(f"My name is {name}, and I'am {age} years old.");

Rendering Mermaid Codes

And auto-mermaid to render Mermaid sources.

Implicit flowchart:

graph LR A --> B C --> D

By now, Mermaid sources is not supported by highlight.js, so we adopt the CSS syntax to add little bit colors.

Explicit flowchart:

flowchart LR A(["Start"]) A --> B{"Decision"} B --> C["Option A"] B --> D["Option B"]

Sequence diagram:

sequenceDiagram Alice ->> John: Hello John, how are you? John -->> Alice: Great! Alice -) John: See you later!

Class diagram:

classDiagram class BankAccount BankAccount : -String owner BankAccount : +Bigdecimal balance BankAccount : +deposit(amount) BankAccount : +withdraw(amount)

State diagram:

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Mindmap:

mindmap Web Front End HTML HTML 4 HTML 5 CSS CSS Box Model CSS Grid JavaScript DOM ESM

QuadrantChart:

quadrantChart title Quadrant Chart Demo x-axis Less --> More y-axis Low --> High quadrant-1 Quadrant 1 quadrant-2 Quadrant 2 quadrant-3 Quadrant 3 quadrant-4 Quadrant 4 A: [0.2, 0.3] B: [0.7, 0.8]

Rendering Graphviz Codes

A simple graph.

digraph { rankdir = LR; a -> b -> c; }

And for record nodes.

digraph { rankdir = TB; node [shape=record]; struct [label="left | {one | two} | right"]; }

Hiding Sources

When rendering Graphviz or Mermaid diagrams, sometimes we need only the graph result, but not showing the sources. Then add a hide-srcs to its' class attribute.

digraph { rankdir = LR; a -> b -> c -> a; }

In this way we get a plain image.

Color Theme Handling

When the color theme is changed, both of the sources and result panel of each trim-pre, would respond automatically.

Click on the moon | sun icon at the top-right corner of this page to view the effects.

Conclusion

By importing only a line of codes, various trim-pres would be high-lighted, and JavaScript, Wasm, Python, Mermaid and Graphviz codes in each of them would be run automatically by setting the prefix auto- to its class.

Each trim-pre behaves little bit like a cell of Jupyter Notebook, while keeping all source codes of each limited in its' own scope, without polluting the global scope.

So in the Web environment, I'd prefer to trim-pre rather than Jupyter Notebook.

In the future, more programming languages would be supported and integrated into trim-pre.

Extentions

See also:

Resources

  1. highlightjs.org
  2. Supported Languages