repository·pharo5·Indexed 42 days ago
https://github.com/squarebracketassociates/updatedpharobyexampleA practical guide to the Pharo programming language and live coding environment. This repository contains an older version of the book as a collection of Pillar-formatted documentation files, including guidelines for contributions, Pillar image and code block syntax, and support for the sba-book LaTeX class.
The Pharo Logo SVG uses a nested group structure. The top-level Pharo_Logo contains a Pharo_Icon, which in turn contains a Pharo_Beacon. The Pharo_Beacon is intended for use as a website favicon.
SVG Hierarchy:
<g id="logo">
...
<g id="icon">
...
<g id="beacon">
...
</g>
</g>
</g>To use Highlight.js on a web page, include the library, a CSS theme, and call hljs.initHighlightingOnLoad(). The library will automatically find and highlight code inside <pre><code> tags by attempting to auto-detect the language.
To explicitly specify a language when auto-detection fails, use the class attribute on the <code> tag with the language name (e.g., class="html") or use the language- or lang- prefixes.
To disable highlighting for a specific block, use the nohighlight class.
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Explicit language -->
<pre><code class="html">...</code></pre>
<!-- Disable highlighting -->
<pre><code class="nohighlight">...</code></pre>The standard CDN-hosted package of Highlight.js does not include all languages to keep the file size small. If a required language is missing, you can manually include it by adding a script tag pointing to the specific language file from a CDN (e.g., cdnjs).
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>For more control over what and when to highlight, use hljs.highlightBlock(block) and hljs.configure(options). This allows you to target specific elements instead of relying on the automatic initHighlightingOnLoad() behavior.
If you are using a container that does not preserve line breaks, you can configure Highlight.js to use <br> tags by setting useBR: true in the configure method.
// Example using jQuery to manually highlight blocks
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
// Example with custom configuration for non-preserving containers
hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});Contributions follow the GitHub fork-and-pull workflow:
initials_ChapterName_my_topic_description (e.g., git checkout -b dz_PharoTour_update_screen_snapshots).For detailed instructions on Pillar syntax and LaTeX setup, refer to the CONTRIBUTING.md file in the repository. For technical questions, contact the pharo-dev mailing list.
Highlight.js can be used via CDN, downloaded as a custom build, or installed as a module on a server.
Important Notes:
go.min.js) after the main library script.r.js -o name=hljs ...).<!-- Adding a missing language from CDN -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script># Example r.js command for optimization
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.jsThe sbabook class is built on the memoir document class and is designed for specific semantic markup and typographic styles.
Important Requirements:
pdflatex to ensure fonts load correctly.polyglossia for language settings, not babel.Basic preamble structure:
\documentclass{sbabook}
\setmainlanguage{english} % this is polyglossia, not babel
\begin{document}
...and off you go!
\end{document}To generate the Pharo_Icon_v0.9.svg asset, follow this workflow involving Inkscape and manual optimization:
pharo-logos.zip from http://www.pharo-project.org/pharo-download/media-files.pharo-0.8.1.pdf into Inkscape.shadow).25.772936550317932 to 25.77).background's fill-opacity to 0.flare's opacity to 0.7 (increased from 0.5 for better contrast).water-splashes and flare of the icon-part will extend out of the stylized "o" (minimal intervention).To use Highlight.js on a web page with automatic language detection, link a style sheet, include the highlight.pack.js library, and call hljs.initHighlightingOnLoad(). This method automatically finds and highlights code within <pre><code> tags.
If automatic detection fails, you can manually specify the language by adding a class to the <code> tag using the language- or lang- prefix (e.g., class="language-html").
To prevent a specific block from being highlighted, use the nohighlight class.
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Manual language specification -->
<pre><code class="html">...</code></pre>
<!-- Disable highlighting -->
<pre><code class="nohighlight">...</code></pre>When contributing documentation, follow these formatting rules:
==Object== for all inline mentions of objects, messages, variables, or packages.To prevent large code blocks from freezing the browser UI, you can offload the syntax highlighting process to a Web Worker.
Main Script Implementation:
Listen for the load event, select the code element, create a new Worker, and set up an onmessage handler to update the element's innerHTML with the worker's result.
Worker Script (worker.js) Implementation:
Use importScripts to load highlight.pack.js, then use self.hljs.highlightAuto(event.data) to process the text and postMessage the result back to the main thread.
// In your main script
addEventListener('load', function() {
var code = document.querySelector('#code');
var worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
})
// In worker.js
onmessage = function(event) {
importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
}