In this thread markdown-to-html-with-a-twist @Erel shows code that downloads a markdown string and converts that string to html and shows the result in a WebView.
He uses a parser library named markdown2 that was written in Python.
In this thread I would like to show a few alternative ways to parse a markdown text. The user interface is kept very simple. In the first textarea the markdown text is added. In the second textarea the HTML result from the parser is shown and the result is loaded in the bottom WebView.
The parser subroutine contains code to change 3 headings, a horizontal rule, some font formatting (bold, italic, underline, strikethrough) and a few symbols.
It doesn’t contain code for unordered list items and blockquotes.
In the start method a new object of the markdownparser class is created. The parse method from that object is then called and the result is returned.
For this to work you need to place the markdownparser.jar file in the AdditionalLibraries folder. And in the Region Project attributes you need to add:
The java library was compiled with JDK 23.0.1 (and javafx 23). Adjust the path to your JDK installation. Download and install the JDK and javafx SDK if you don’t have it yet.
Now the unordered list items and the blockquotes are converted.
In the log panel of the B4J IDE the lines are displayed that the library sends to the system output (System.out.println).
The markdownparser library is imported in the Controller class.
In this class the public variables are declared that are linked to the user interface objects (a button, 2 textarea’s and a webview).
In the initialize() method of the Controller class the default text is set for the first textarea.
In the btnparseClick method the new object of the markdownparser class is created. The parse method from the new object is called and the result is used to fill the second textarea and to show the result in the webview.
The BlueJ IDE (5.4.1) is used to compile the javafx source code and to create the markdownparser.jar file (project / Create Jar File…).
The markdown_parser package contains the markdownparser class and its methods: parse, parse_line_marks, parse_font_formatting, parse_symbols, parse_images, parse_links, …
In the parse_images method you can find an example of a markdown line to add images in the text. Copy and paste the commented line in the first textarea and adjust the path and the text. The markdown for an image is as follows: .
In the parse_links you can also find an example.
The library doesn’t support all the markdown characters yet. You can use the source code and add methods for the remaining markdown characters. There are different flavors of markdown marks. In this example the italic marks are non-standard backticks (``), for the underline marks 2 underscore characters (__) are used and 2 tilde characters (~~) are used for the strikethrough characters.
You can add HTML and CSS to the first textarea to do some styling like the yellow background for instance.
You can find the generated documentation of the markdownparser library in the “doc” folder.
You can find the source codes in the attachments:
markdown_test.zip
test_markdown_parser.zip
testenvironment86.zip
Feel free to experiment with the source codes once you have downloaded and installed all the components needed.
He uses a parser library named markdown2 that was written in Python.
In this thread I would like to show a few alternative ways to parse a markdown text. The user interface is kept very simple. In the first textarea the markdown text is added. In the second textarea the HTML result from the parser is shown and the result is loaded in the bottom WebView.
First case using B4J and a parser subroutine.
When you click on the parse button the parse_markdown subroutine is called and the HTML result is returned to the content variable in the btnparse_Click subroutine. The content variable is used to fill the second textarea and to load the content HTML text in the WebView.
B4X:
Dim content As String = parse_markdownIt doesn’t contain code for unordered list items and blockquotes.
Second case using B4J and a java parser library.
The btnparse_Click subroutine also contains a line of code to call a java method called “start”. Uncomment the line (and put a comment before the line of the call to the parse_markdown subroutine).
B4X:
Dim content As String = jo.RunMethod("start",Array(ta1.text))
B4X:
#if java
import markdown_parser.*;
public String start(String source) {
markdownparser mdp = new markdownparser();
String res = mdp.parse(source);
return res;
}
#End If
B4X:
#AdditionalJar: markdownparser.jar
#JavaCompilerPath: 23, E:\java\jdk-23.0.1\bin\javac.exeNow the unordered list items and the blockquotes are converted.
In the log panel of the B4J IDE the lines are displayed that the library sends to the system output (System.out.println).
Third case using javafx and the java parser library.
In this case the user interface is created using SceneBuilder. The test_markdown class contains code to load the fxml file.
Java:
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Test Markdown Parser");
primaryStage.setResizable(false);
VBox layout = FXMLLoader.load(getClass().getResource("test_markdown.fxml"));
layout.setStyle("-fx-font-size: 16");
Scene scene = new Scene(layout, 600,600);
primaryStage.setScene(scene);
primaryStage.show();
}
Java:
import markdown_parser.*;In the initialize() method of the Controller class the default text is set for the first textarea.
In the btnparseClick method the new object of the markdownparser class is created. The parse method from the new object is called and the result is used to fill the second textarea and to show the result in the webview.
Java:
public void btnparseClick(ActionEvent e) {
markdownparser mdp = new markdownparser();
String res = mdp.parse(ta1.getText());
ta2.setText(res);
wv1.setZoom(1.5);
WebEngine webEngine = wv1.getEngine();
webEngine.loadContent(res);
}The markdown_parser package contains the markdownparser class and its methods: parse, parse_line_marks, parse_font_formatting, parse_symbols, parse_images, parse_links, …
In the parse_images method you can find an example of a markdown line to add images in the text. Copy and paste the commented line in the first textarea and adjust the path and the text. The markdown for an image is as follows: .
In the parse_links you can also find an example.
The library doesn’t support all the markdown characters yet. You can use the source code and add methods for the remaining markdown characters. There are different flavors of markdown marks. In this example the italic marks are non-standard backticks (``), for the underline marks 2 underscore characters (__) are used and 2 tilde characters (~~) are used for the strikethrough characters.
You can add HTML and CSS to the first textarea to do some styling like the yellow background for instance.
You can find the generated documentation of the markdownparser library in the “doc” folder.
You can find the source codes in the attachments:
markdown_test.zip
test_markdown_parser.zip
testenvironment86.zip
Feel free to experiment with the source codes once you have downloaded and installed all the components needed.
Last edited:
10)
