highmark-yapp 0.0.330 → 0.0.332
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Highmark with Yapp listings.
|
|
4
4
|
|
|
5
|
-
This package augments the HTML created with Highmark with [Yapp
|
|
5
|
+
This package augments the HTML created with Highmark with [Yapp](https://github.com/djalbat/yapp) listings.
|
|
6
6
|
The result is much more pleasing to the eye.
|
|
7
7
|
See the Juxtapose site, for example, which makes use of this package:
|
|
8
8
|
|
|
@@ -16,20 +16,23 @@ Using Highmark for creating HTML for websites usually works extremely well and e
|
|
|
16
16
|
- [Installation](#installation)
|
|
17
17
|
- [Example](#example)
|
|
18
18
|
- [Usage](#usage)
|
|
19
|
+
- [Building](#buidling)
|
|
19
20
|
- [Contact](#contact)
|
|
20
21
|
|
|
21
22
|
## Introduction
|
|
22
23
|
|
|
23
24
|
Highmark is a document preparation system inspired by [Markdown](https://en.wikipedia.org/wiki/Markdown) and [TeX](https://en.wikipedia.org/wiki/TeX).
|
|
24
|
-
There are several packages in the distribution
|
|
25
|
-
All of the other packages are likely only of interest to prospective developers.
|
|
25
|
+
There are several packages in the distribution.
|
|
26
26
|
|
|
27
27
|
- [Highmark-CLI](https://github.com/djalbat/highmark-cli) Highmark's CLI tool.
|
|
28
28
|
- [Highmark Yapp](https://github.com/djalbat/highmark-yapp) Highmark with Yapp listings.
|
|
29
29
|
- [Highmark Fonts](https://github.com/djalbat/highmark-fonts) Computer Modern fonts for Highmark.
|
|
30
|
-
- [Highmark Client](https://github.com/djalbat/highmark-
|
|
30
|
+
- [Highmark Client](https://github.com/djalbat/highmark-client) Highmark's bundled client for viewing HTML.
|
|
31
31
|
- [Highmark Markdown](https://github.com/djalbat/highmark-markdown) Highmark's Markdown and Markdown Style languages.
|
|
32
32
|
|
|
33
|
+
Only the CLI tool is needed by end users.
|
|
34
|
+
All of the other packages are likely only of interest to prospective developers.
|
|
35
|
+
|
|
33
36
|
## Installation
|
|
34
37
|
|
|
35
38
|
If you would like to contribute or would simply like to have a look at the code, you can clone the repository with [Git](https://git-scm.com/)...
|
|
@@ -68,6 +71,7 @@ import { renderYappStyles } from "highmark-yapp";
|
|
|
68
71
|
|
|
69
72
|
renderYappStyles();
|
|
70
73
|
|
|
74
|
+
...
|
|
71
75
|
```
|
|
72
76
|
|
|
73
77
|
Next, to create a node from some Markdown content, use the `nodeFromContent()` utility function:
|
|
@@ -79,7 +83,8 @@ const { nodeFromContent } = markdownUtilities;
|
|
|
79
83
|
|
|
80
84
|
const content = `
|
|
81
85
|
|
|
82
|
-
...
|
|
86
|
+
...
|
|
87
|
+
|
|
83
88
|
`,
|
|
84
89
|
node = nodeFromContent(node);
|
|
85
90
|
|
|
@@ -109,9 +114,8 @@ class Article extends Element {
|
|
|
109
114
|
}
|
|
110
115
|
```
|
|
111
116
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
One way to do this would be to extend this base `Article` class thus:
|
|
117
|
+
Here the `didMount()` method assumes that some content is defined by way of the static `content` property.
|
|
118
|
+
One way to do this would be to extend the `Article` class thus:
|
|
115
119
|
|
|
116
120
|
```
|
|
117
121
|
import Article from "../article";
|
|
@@ -124,13 +128,19 @@ export default class ArchitectureArticle extends Article {
|
|
|
124
128
|
...
|
|
125
129
|
|
|
126
130
|
`;
|
|
127
|
-
|
|
131
|
+
}
|
|
128
132
|
```
|
|
129
133
|
|
|
130
|
-
|
|
131
|
-
This generally makes things
|
|
134
|
+
Note that the usual delimiters for block listings consisting of three backticks have been replaced with three single quotes `'''`.
|
|
135
|
+
This generally makes things easier when working inside string template literals that use backticks for delimiters of course.
|
|
136
|
+
|
|
137
|
+
## Building
|
|
138
|
+
|
|
139
|
+
Automation is done with [npm scripts](https://docs.npmjs.com/misc/scripts), have a look at the `package.json` file. The pertinent commands are:
|
|
140
|
+
|
|
141
|
+
npm run build-debug
|
|
142
|
+
npm run watch-debug
|
|
132
143
|
|
|
133
144
|
## Contact
|
|
134
145
|
|
|
135
146
|
* james.smith@djalbat.com
|
|
136
|
-
|
package/package.json
CHANGED