### Inklewriter JSON File Example Source: https://www.inklestudios.com/inklewriter/to-ink This is an example of the JSON file format downloaded from Inklewriter. ```json Terminate all loose ends with ``` -> END ``` ``` -------------------------------- ### Simple Branching Narrative in Ink Source: https://www.inklestudios.com/ink/web-tutorial This is a basic example of a branching narrative structure in ink, demonstrating knots, diverts, and choices. Copy and paste this into the Inky editor to preview. ```ink === start === Hello there! Fancy a cup of tea? * [Yes] -> tea * [No] -> no_tea === tea === Splendid! I'll put the kettle on. * [Go back] -> start === no_tea === Oh, well. Perhaps another time. * [Go back] -> start ``` -------------------------------- ### Vary Text Randomly with Shuffle Mode Source: https://www.inklestudios.com/inklewriter/getting-started Enable shuffle mode by starting a text block with a tilda (~). Separate variations with vertical bars (|). Inklewriter will randomly select one variation each time the text is displayed. ```ink The sky was {~clear|cloudy|dark|very far away} and the moon was {~full|gibbous|new}. ``` -------------------------------- ### Add a Basic Hyperlink Source: https://www.inklestudios.com/inklewriter/getting-started Use square brackets to create a hyperlink. The text within the brackets will be the URL. ```markdown [http://www.inklestudios.com] ``` -------------------------------- ### Basic Choice Source: https://www.inklestudios.com/ink/web-tutorial Create player choices using '+' followed by the choice text. The text becomes the clickable option and appears after selection. ```ink + "Around the world, Monsieur?" ``` -------------------------------- ### Implement Story Restart Source: https://www.inklestudios.com/ink/web-tutorial Use the '# RESTART' tag to clear the story's progress and variables, restarting the story from the beginning. It's recommended to place this behind a choice. ```ink You died! + Try again from the beginning. # RESTART -> END ``` -------------------------------- ### Basic Body Styling Source: https://www.inklestudios.com/ink/web-tutorial Sets the default font family, font weight, and background color for the entire page. ```css body { font-family: 'Open Sans', sans-serif; font-weight: lighter; background: white; } ``` -------------------------------- ### Choice with Additional Content Source: https://www.inklestudios.com/ink/web-tutorial Add extra lines of text after a choice that will be displayed after the choice is taken, not before. ```ink + "Around the world, Monsieur?" I was utterly astonished. "You are in jest!" I told him in dignified affront. -> astonished ``` -------------------------------- ### Display Counter Values as Numbers or Words Source: https://www.inklestudios.com/inklewriter/getting-started Use the 'value:' or 'number:' directives within square brackets to display the current value of a counter. 'value:' can display numbers or words, while 'number:' specifically displays the numerical value. ```ink You have [value:letters] more letters to post, one to No. [number:houseNumber] over the road. ``` -------------------------------- ### Add a Hyperlink with Custom Text Source: https://www.inklestudios.com/inklewriter/getting-started To display custom text for a hyperlink, use a vertical bar after the URL, followed by the desired display text, all within square brackets. ```markdown [http://www.inklestudios.com|inkle's website] ``` -------------------------------- ### Complex Conditional Logic Source: https://www.inklestudios.com/ink/web-tutorial Combine multiple conditions using 'and', 'or', and parentheses to create more intricate logic for displaying content or choices. ```ink { catacombs and not pick_up_ring: "So you didn't find it then?" she enquired. + [Apologise.] -> apologise } ``` ```ink { (catacombs or cross_river or sing_in_rain) and not buy_new_shoes: My shoes were sodden from earlier in the day. } ``` -------------------------------- ### Importing Google Fonts Source: https://www.inklestudios.com/ink/web-tutorial Imports a custom font from Google Fonts to be used in your CSS. ```css @import url('https://fonts.googleapis.com/css?family=Lobster'); ``` -------------------------------- ### Use Built-in 'end' Class Source: https://www.inklestudios.com/ink/web-tutorial Utilize the built-in 'end' CSS class provided by the Inky template to style the 'The End' text with centered and bold formatting. ```ink # CLASS: end The End -> END ``` -------------------------------- ### Set Dark Theme in Ink Source: https://www.inklestudios.com/ink/web-tutorial Apply a dark theme to your web story by placing the 'theme: dark' tag at the very top of your Ink file. The web template uses this as a global tag to apply specific CSS styling. ```ink # theme: dark ``` -------------------------------- ### Choice with Narrated Text Source: https://www.inklestudios.com/ink/web-tutorial Combine a silent choice with additional narrated text that appears after the choice is made. ```ink + [Nod curtly.] -> nod + I nodded curtly. ``` -------------------------------- ### Silent Choice Source: https://www.inklestudios.com/ink/web-tutorial Use square brackets `[]` around choice text for a 'silent' choice, where the text only appears as the clickable option and not in the main narrative after selection. ```ink + [Nod curtly.] ``` -------------------------------- ### Choice with Divert Source: https://www.inklestudios.com/ink/web-tutorial Combine choices with diverts to immediately navigate to another section after selection. ```ink + [Nod curtly.] -> nod ``` -------------------------------- ### Conditional Content Based on Knot Visit Source: https://www.inklestudios.com/ink/web-tutorial Display text conditionally based on whether a specific knot has been visited. The knot name acts as a boolean condition. ```ink { catacombs: It was darker here than the Paris catacombs. } ``` -------------------------------- ### Define Custom CSS Class Source: https://www.inklestudios.com/ink/web-tutorial Define the appearance of a custom CSS class in your style.css file. The dot prefix denotes a class selector. ```css .danger { color: red; } ``` -------------------------------- ### Insert Image in Ink Story Source: https://www.inklestudios.com/ink/web-tutorial Use the IMAGE tag to display images within your Ink story. The image file should be in the same directory or a specified path. Tags are associated with the line of text below them. ```ink # IMAGE: imageName.jpg ``` ```ink # IMAGE: myImages/imageName.jpg ``` ```ink The above picture is a dog. # IMAGE: dog.jpg ``` -------------------------------- ### Inverted Conditional Choice Source: https://www.inklestudios.com/ink/web-tutorial Show a choice only if a specific condition has NOT been met. Use 'not' to invert the condition. ```ink + {not catacombs} [Visit the catacombs] -> catacombs ``` -------------------------------- ### Styling H1 Header with Custom Font Source: https://www.inklestudios.com/ink/web-tutorial Applies a custom font, size, and center alignment to the main header (H1). ```css h1 { font-family: 'Lobster', cursive; font-size: 80pt; text-align: center; } ``` -------------------------------- ### Divert to Another Knot Source: https://www.inklestudios.com/ink/web-tutorial Use '-> knot_name' to navigate the story to a different section. This is automatically handled by the Ink engine. ```ink -> london ``` -------------------------------- ### Apply Custom CSS Class to Text Source: https://www.inklestudios.com/ink/web-tutorial Add a tag to a line of text in your Ink story to apply a custom CSS class. This allows for specific styling of individual text elements. ```ink You make your way into the forest. There's a pool of blood on the ground. # CLASS: danger ``` -------------------------------- ### Conditional Choice Source: https://www.inklestudios.com/ink/web-tutorial Present a choice to the player only if a specific condition is met, such as visiting a particular knot. ```ink + {catacombs} [Tell her what you found] -> tell_her ``` -------------------------------- ### Set Author Byline in Ink Source: https://www.inklestudios.com/ink/web-tutorial Specify an author's name using the 'author: Your Name' tag at the top of your Ink file. The Inky web template will use this to insert a byline below the main title. ```ink # author: Your Name ``` -------------------------------- ### Clear Screen Tag in Ink Source: https://www.inklestudios.com/ink/web-tutorial The CLEAR tag is a special feature for Inky's web template. It removes all text in the current flow and restarts from the top. Use it directly after a choice to avoid clearing text before it's seen. ```ink # CLEAR ``` -------------------------------- ### Intentional Story End Source: https://www.inklestudios.com/ink/web-tutorial Divert to 'END' to signal the intentional conclusion of a story path. Omitting this may result in 'loose end' warnings. ```ink -> END ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.