#syntax highlighting

The <syntax-highlight> is a web component that tokenizes source code into styled text using the CSS Custom Highlight API. It relies on the well-established Prism.js library for language parsing but takes a modern approach to rendering. Instead of wrapping every token in a <span> tag, it applies styles through a new, more performant browser API. This keeps the DOM clean and lightweight. The…

The javaStack.js JavaScript library provides a simple way to highlight Java stack traces within your web projects.  Ideal for improving the readability and visual presentation of Java stack traces on your websites. It parses the stack trace, wraps key elements like method names, file names, and line numbers with specific class names, and outputs ready-to-style HTML. You can then style these…

Syntax.js is a lightweight, customizable, and extensible syntax highlighting library written in vanilla JavaScript. It currently supports 11 programming languages (like C, Java, JavaScript, and Python), and is fully compatible with CSS/SASS/Bootstrap. How to use it: 1. Load the core JavaScript and Stylesheet in the document: <link rel="stylesheet" href="/dist/syntax.js.min.css" /> <script…

Please reblog for reach!

Easy Syntax Highlighting Library – CSPSH.js

CSPSH is a tiny and easy-to-implement syntax highlighting library that helps developers showcase their code snippets in a nice way. Features: Light and Dark modes. Copy code snippets with a single click. Supports JavaScript, Java, C, C++, and StoryScript. 3 built-in themes. How to use it: 1. Import the CSPSH. <script src="/path/to/CSPSH.js" type="module"></script> 2. Add your code snippets into…

Syntax Highlighter For JSX – Sugar High

Sugar High is a dead-simple syntax highlighting library for JSX, which is a syntax extension to JavaScript. How to use it: 1. Install and import the Sugar High. # NPM $ npm i sugar-high import { highlight } from 'sugar-high' <!-- Browser --> <script type="module"> import { highlight } from './index.mjs'; </script> 2. Create an empty container to hold your JSX…

こんにちは！夏休みは早いですね！（大嘘）

先日の"Syntax Highlighting設定"ではご迷惑をおかけしました><

一応治ったので報告します。(治ったハイライトをまだ見てない方は是非見てくださいね♪)

そもそもハイライトされない問題

まずこの問題が発生しました。スクリプトまたはcssが読み込まれないために、全く変化しない問題です。

結論から言うと、tumblrのセキュリティが邪魔していたようです。

tumblrの設定の"常にブログをSSLで処理する"がONになっていたために、httpの接続が許されなかったみたいです。

一行で改行せずに表示されてしまう問題

やっとスクリプト/cssが読み込まれたと思ったらこの問題が発生しました。

ハイライトされているのに1行目でコードが永遠と続く、かなり見づらい状態です。

どうやらtumblrのデフォルトテーマが原因らしく、これを機にテーマを変えてみました。時代とは逆行しているかもしれませんが、デフォルトよりPCで見やすい形になったのかな？と思います。