Tag Archives: Nokia Developer Blogs

Code syntax markup added to Nokia Developer Blogs

Posted on by
Reply

We’ve just updated the Blogs to add proper support for code syntax markup, which will be a great relief to posters who have been trying to get decent looking monospace code blocks using odd combinations of pre and code tags, and proper layout using HTML br tags.

All you need to do is add a lang=”language-code“ attribute to your pre tag and copy-paste your formatted text into the block. You can also add line marking (using attribute line=“number“) and line “highlighting” (using attribute highlight=“3“). Check out the example below:

CSharp without line numbers 

#region Properties
public RelayCommand CTest { get; private set; }
 
private ObservableCollection _CtxItems;
public ObservableCollection CtxItems
{
    get
    { return _CtxItems; }
    set
    {
        if (_CtxItems == value)
        {
            return;
        }
        var oldValue = _CtxItems;
        _CtxItems = value;
        base.RaisePropertyChanged("CtxItems");
    }
}

Csharp with line numbers and highlight

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#region Properties
public RelayCommand CTest { get; private set; }
 
private ObservableCollection _CtxItems;
public ObservableCollection CtxItems
{
    get
    { return _CtxItems; }
    set    {
        if (_CtxItems == value)
        {
            return;
        }
        var oldValue = _CtxItems;
        _CtxItems = value;
        base.RaisePropertyChanged("CtxItems");
    }
}

The implementation is not (at time of writing) perfect – there isn’t quite enough space around blocks that don’t have line numbers, XML does not work unless you first escape HTML entitites, and nor does captioning. For documentation of how to use this feature (and for the current state of development) see our User Guide.

Examples

Java

2
3
4
5
6

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

Csharp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#region Properties
public RelayCommand CTest { get; private set; }
 
private ObservableCollection _CtxItems;
public ObservableCollection CtxItems
{
    get
    { return _CtxItems; }
    set
    {
        if (_CtxItems == value)
        {
            return;
        }
        var oldValue = _CtxItems;
        _CtxItems = value;
        base.RaisePropertyChanged("CtxItems");
    }
}
 
private string _SelectedCtxItems;
1
2
3
4
5

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

C++

1
2
3
4
5
6
7
8

ref class myFactory sealed : Windows::ApplicationModel::Core::IFrameworkViewSource
{
public:
    virtual Windows::ApplicationModel::Core::IFrameworkView^ CreateView()
    {
         return ref new myView();
    };
};

html4strict

 
<button type="button" name="stepUp">Add 10</button>
<button type="button" name="stepDown">Subtract 10</button>

CSS

1
2
3
4
5
6
7
8
9
10

@font-face {
    font-family: 'iconic';
    src: url('webfonts/iconic.eot');
    src: url('webfonts/iconic.eot?#iefix') format('embedded-opentype'),
         url('webfonts/iconic.svg#iconic') format('svg'),
         url('webfonts/iconic.woff') format('woff'),
         url('webfonts/iconic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

javascript

1
2
3
4
5
6
7

input.addEventListener('invalid', function(e) {
    if(input.validity.valueMissing){
        e.target.setCustomValidity("PLZ CREATE A USERNAME, YO!"); 
    } else if(!input.validity.valid) {
        e.target.setCustomValidity("U R DOIN IT WRONG!"); 
    } 
}, false);

XML (with escaped HTML entitities

Note, uses escaped=”true”

<!--ContentPanel - place additional content here-->
 <grid grid.row="1" x:name="ContentGrid">
   <listbox itemcontainerstyle="{StaticResource ContexMenuItemStyle}" itemssource="{Binding CtxItems}" selecteditem="{Binding SelectedCtxItems, Mode=TwoWay}" x:name="lbxTest">
  </listbox>
 </grid>

Problematic examples

XML

Defective because only comment shown – not subsequent lines

<!--ContentPanel - place additional content here-->

PHP

Defective, because PHP code not shown

<div>
 
</div>

Captions (file and/or file path of the source file)

Defective, because no caption shown

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}